프레임 내에서 이미지를 확대하는 방법

내 웹 페이지에서 그리드 유형의 이미지 갤러리를 만드는 데 지쳤습니다. 프레임 내에서 확대 된 이미지를 확대/축소해야합니다. (예 : http://cad180.com/About) [마우스를 올리면 이미지가 확대됩니다. 프레임 내]. 프레임 내에서 이미지를 확대하는 방법

.gal { 
 
    -webkit-column-count: 3; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; 
 
    /* Firefox */ 
 
    column-count: 3; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
.zoom { 
 
    cursor: pointer; 
 
    transition: all .5s ease; 
 
} 
 

 
.zoom:hover { 
 
    transform: scale(1.2, 1.2); 
 
} 
 

 
.gal img { 
 
    width: 100%; 
 
    padding: 7px 0; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .gal { 
 
    -webkit-column-count: 1; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; 
 
    /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <div class="gal"> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

나 또한 중간 부분과 오른쪽 부분의 이미지가 제발 .Help 제대로 확대되지 않은이 일을 도와주세요. MY DEMO CODE

출처

2017-10-03 mr.tanmay

은 단순히 당신은 div로 img 요소를 래핑이 필요하고 그것을 overflow: hidden을 수행

.grid { 
    overflow: hidden; 
}

JSFiddle

를 두 번째 문제에 대한 당신이 그것을 해결하기 위해 backface-visibility: hidden;를 사용해야합니다. 그것에 대해 더 자세히 알아보기 here.

출처

2017-10-03 11:39:54 Pedram

그 주셔서 감사합니다,하지만 오른쪽 중간 측면 가져가 –

@ mr.tanmay에서 제대로 작동하지 않는 업데이트 바이올린 – Pedram

너무 감사합니다 :) –

이미지를 컨테이너로 감싸고 overflow: hidden;을 컨테이너에 추가하십시오.

또한 패딩을 img 요소에서 제거하고 컨테이너의 간격을 지정하십시오.

.gal { 
 
    -webkit-column-count: 3; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; 
 
    /* Firefox */ 
 
    column-count: 3; 
 
    display: block; 
 
} 
 

 
.image-container { 
 
    overflow: hidden; 
 
    margin: 14px 0; 
 
} 
 

 
.zoom { 
 
    cursor: pointer; 
 
    transition: all .5s ease; 
 
} 
 

 
.zoom:hover { 
 
    transform: scale(1.2); 
 
} 
 

 
.gal img { 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .gal { 
 
    -webkit-column-count: 1; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; 
 
    /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <ul class="gal"> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     </li> 
 
     <li class="image-container"> 
 
      <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

출처

2017-10-03 11:41:29

베틀을 오른쪽에 참조하시기 바랍니다 측면 및 중간 부분 이미지 .. 줌 시점에 제대로 표시되지 않습니다. –

프레임 내에서 이미지를 확대하는 방법

답변

관련 문제