如何防止图像超出父级边界？答案

【问题标题】：How to prevent an image from scaling outside parent's borders?如何防止图像超出父级边界？
【发布时间】：2017-04-13 01:57:23
【问题描述】：

我有提供的不同服务的列表，每个服务都有一个图像、标题和描述。我进行了设置，以便在鼠标悬停时图像缩放到 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>

我必须进行哪些更改才能使图像在鼠标悬停时在父级边框内缩放？

【问题讨论】：

overflow: hidden; 在父母身上？
降低比例因子。
给出溢出：隐藏；给父母。
正如大家所说，overflow hidden 会帮你解决问题。

标签： css html

【解决方案1】：

您可以将图像添加到 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">
	  <div class="thumbnail hover01">
	     <div class="img-parent">
	        <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>

【讨论】：

这可能是最简洁的方法，因为它还避免了放大后续文本。我会打电话给班级.noverflow。
感谢您的回答，它确实帮助我实现了我想要的。

【解决方案2】：

只需使用overflow: hidden;

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

【讨论】：

【解决方案3】：

创建一个您在其上设置overflow: hidden; 的img 容器。我在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>

【讨论】：