如何防止圖像在家長的邊界外縮放？

我提供了不同服務的列表，每個服務都有一個圖像，標題和說明。我已經設置了它，以便在鼠標懸停時將圖像縮放爲1.3倍大小。縮放工作，但這樣做時忽略父母的邊界。如何防止圖像在家長的邊界外縮放？

我已經捕獲了它在行動中看起來像的GIF。

這是我的工作的代碼。

.cleaningservices { 
 
    max-width: 250px; 
 
    max-height: 250px; 
 

 
} 
 

 
    /* Default state of the image */ 
 
    .hover01 img { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
     -webkit-transition: .3s ease-in-out; 
 
     transition: .3s ease-in-out; 
 
    } 
 

 
    /* Scale the image to 1.3 it's size on mouse hover */ 
 
    .hover01:hover img { 
 
     -webkit-transform: scale(1.3); 
 
     transform: scale(1.3); 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="cleaningservices"> 
 
    <div class="col-sm-6 col-md-4"> 
 
     <div class="thumbnail hover01"> 
 
     <img src="https://bosworthco.com/wp-content/uploads/2016/10/cleaning-268134_960_720.jpg" alt="deep house cleaning"> 
 
     <div class="caption"> 
 
      <h3>Deep Cleaning</h3> 
 
      <p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

什麼改變我必須作出，使圖像父邊框內的擴展鼠標懸停？

來源

2016-11-29 raimond

'overflow：hidden;'on parent？ –

減小比例因子。 – connexo

給溢出：隱藏;給父母。 –

您可以將圖像添加到一個div並給DIV overflow:hidden;

.hover01 img { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    -webkit-transition: .3s ease-in-out; 
 
    transition: .3s ease-in-out; 
 
    width:100%; 
 
} 
 
.hover01:hover img { 
 
    -webkit-transform: scale(1.3); 
 
    transform: scale(1.3); 
 
} 
 

 
.img-parent{ 
 
    overflow:hidden; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="cleaningservices"> 
 
     <div class="col-sm-6 col-md-4"> 
 
\t <div class="thumbnail hover01"> 
 
\t  <div class="img-parent"> 
 
\t   <img src="http://fiusms.fiu.edu/wp-content/uploads/Residential-Cleaning-Watauga-TX.jpg" alt="deep house cleaning"> 
 
      </div> 
 
\t  <div class="caption"> 
 
\t \t <h3>Deep Cleaning</h3> 
 
\t \t <p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p> 
 
\t  </div> 
 
\t </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-11-29 07:19:13 Chiller

這可能是最簡單的方法，因爲它也避免了對後續文本的縮放。我會叫'.noverflow'類。 – connexo

是的..你需要另一個div來包含圖像 – Chiller

謝謝你的回答，它確實幫助我實現了我想要的。 – raimond

創建一個img容器，您在其中設置overflow: hidden;。我在body上添加了一個背景顏色，以便您看到它的工作原理。

body { 
 
    background-color: #f0f0f0 !important; 
 
    padding: 50px; 
 
} 
 
.noverflow { 
 
    overflow: hidden; 
 
} 
 
.thumbnail { 
 
    background-color: #fff; 
 
} 
 
.hover01 img { 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    -webkit-transition: .3s ease-in-out; 
 
    transition: .3s ease-in-out; 
 
} 
 
.hover01:hover img { 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="cleaningservices"> 
 
    <div class="col-sm-6 col-md-4"> 
 
     <div class="thumbnail hover01"> 
 
     <div class="noverflow"><img src="http://fiusms.fiu.edu/wp-content/uploads/Residential-Cleaning-Watauga-TX.jpg" alt="deep house cleaning"></div> 
 
     <div class="caption"> 
 
      <h3>Deep Cleaning</h3> 
 
      <p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-29 07:08:59 connexo

確實有用，謝謝你的回答。 – raimond

只使用overflow: hidden;

.hover01 img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    overflow: hidden; 
}

來源

2016-11-29 07:10:26

如何防止圖像在家長的邊界外縮放？

回答

相關問題