我可以放大图库中的图像，但不能超过我给它们的宽度吗？

Question

图片不断缩小到我的图库中，我无法让它们停留在我设置的边框内。我试过溢出：隐藏，但它不起作用。此外，我无法让图库居中，我已经尝试了中心标签，文本对齐：中心;和浮动。

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  width: 400px;
  float: center;
  object-fit: cover;
  width: 400px;
  height: 400px;
  display: inline-block text-align: center;
  overflow: hidden;
}
div.gallery:hover {
  border: 1px solid #777;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  overflow: hidden;
}
div.gallery img {
  width: 400px;
  height: auto;
  object-fit: cover;
  width: 400px;
  height: 400px;
  -moz-transition: all 0.9s;
  -webkit-transition: all 0.9s;
  transition: all 0.9s;
  max-width: 400px;
  display: inline-block;
  overflow: hidden;
}
div.desc {
  padding: 15px;
  text-align: center;
}

<div style="overflow: hidden;" class="gallery">
  <a target="_blank" href>
    <img src="https://via.placeholder.com/400" alt="Cinque Terre" width="800px" height="600px">
  </a>
  <div class="desc"> </div>
</div>

Answer 1

我猜这更接近你所追求的！？

div.gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.gallery-item {
  border-radius: 4px;
  margin: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 1px 0 rgba(0,0,0,.07), 0 2px 1px -1px rgba(0,0,0,.06);
  transition: box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.gallery-item:hover {
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.1), 0 9px 12px 1px rgba(0,0,0,.07), 0 3px 16px 2px rgba(0,0,0,.06)
}
.gallery-item a {
  display: block;
  overflow: hidden;
  transform: rotate(0deg);
  border-radius: 4px 4px 0 0;
}
.gallery-item a img {
  transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);;
  display: block;
  width: 150px;
  height: auto;
}
.gallery-item:hover img {
  transform: scale(2);
}
div.desc {
  padding: 15px;
  text-align: center;
}

<div class="gallery"> 
  <div class="gallery-item">
    <a target="_blank" href>
      <img src="https://via.placeholder.com/300" alt="Cinque Terre">
    </a>
    <div class="desc">Description</div>
  </div>
  <div class="gallery-item">
    <a target="_blank" href>
      <img src="https://via.placeholder.com/300" alt="Cinque Terre">
    </a>
    <div class="desc">Description</div>
  </div>
  <div class="gallery-item">
    <a target="_blank" href>
      <img src="https://via.placeholder.com/300" alt="Cinque Terre">
    </a>
    <div class="desc">Description</div>
  </div>  
</div>

简而言之，您需要将transform放在内部元素上，将overflow:hidden放在外部元素上。你正在改变整个.gallery.