缩放图像后如何将图像限制在容器中？

问题描述 投票：0回答：2

我创建了一个4列2行的网格。网格具有整个页面的宽度，并且每个部分均等地分割。我希望每个图像都缩放到1.1，并且当用户将鼠标悬停在图像上时，缩放比例会恢复为1。我现在遇到的问题是，当我将图像缩放到1.1时，图像似乎彼此重叠，并且它们不再包含在网格的相应部分中（请参见下面我将鼠标悬停在第二页2.jpg上的图像）。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <img id="pic1" src="1.jpg">
            <img id="pic2" src="2.jpg">
            <img id="pic3" src="3.jpg">
            <img id="pic4" src="4.jpg">
            <img id="pic5" src="5.jpg">
            <img id="pic6" src="6.jpg">
            <img id="pic7" src="7.jpg">
            <img id="pic8" src="8.jpg">
        </div>
    </body>
</html>

CSS：

* {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background-color: #000;
    overflow: hidden;
    object-fit: cover;
}

.container img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.container img:hover {
    width: 100%;
    opacity: 1;
    transform: scale(1);
}

截屏：

“截图”

屏幕截图显示了当我将鼠标悬停在第二张图片2.jpg上时会发生什么。问题是，现在应用了比例尺后，图像1,2,5,6都在其角上重叠。它们不受限于容器创建的原始网格的大小。

html css css-grid
2个回答
0
投票

这是另一种方法，用overflow:hidden包围div并为这些div指定特定的height。

而不是通过变换来缩放图像，您可以将其宽度增加到110％。

运行下面的演示；

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  overflow: hidden;
}

.container div {
  text-align: center;
  height: 100px;
  overflow: hidden;
}

.container img {
  width: 100%;
  transition:0.4s;
}

.container img:hover {
  width: 110%;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
      <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
  </div>
</body>

</html>
0
投票

您可以通过将图像包装在容器中并将这些容器的overflow属性设置为hidden（并且将width设置为100%）来解决此问题。

例如：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="image-container">
                <img id="pic1" src="1.jpg">
            </div>
            <div class="image-container">
                <img id="pic2" src="2.jpg">
            </div>
            <div class="image-container">
                <img id="pic3" src="3.jpg">
            </div>
            <div class="image-container">
                <img id="pic4" src="4.jpg">
            </div>
            <div class="image-container">
                <img id="pic5" src="5.jpg">
            </div>
            <div class="image-container">
                <img id="pic6" src="6.jpg">
            </div>
            <div class="image-container">
                <img id="pic7" src="7.jpg">
            </div>
            <div class="image-container">
                <img id="pic8" src="8.jpg">
            </div>
        </div>
    </body>
</html>

* {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background-color: #000;
    overflow: hidden;
    object-fit: cover;
}

.container .image-container {
    width: 100%;
    overflow: hidden;
}

.container .image-container img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.container .image-container img:hover {
    width: 100%;
    opacity: 1;
    transform: scale(1);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.