Question

我使用W3行容器连续保留4列。但是添加图像时，图像不适合容器，无法修复容器的高度。我在鼠标悬停在图像上时添加了缩放选项。这是好的W3容器还是有最好的方法？

.item img {
    max-width: 100%;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.item:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


<div class="w3-row" style="margin-left:2%;">
  <div class="w3-col w3-green w3-container" style="width:25%">
    <div class="item">
        <img src="../Images/stock-vector-romantic-pink-heart-background-vector-illustration-for-holiday-design-many-flying-hearts-on-white-370450901.jpg" style="width:100%">
    </div>
  </div>

  <div class="w3-col w3-blue w3-container" style="width:2%">
    <p>30%</p>
  </div>
  <div class="w3-col w3-dark-grey w3-container" style="width:20%">
    <p>35%</p>
  </div>
  <div class="w3-col w3-blue w3-container" style="width:2%">
    <p>30%</p>
  </div>
  <div class="w3-col w3-blue w3-container" style="width:25%">
    <div class="item">
        <img src="../Images/stock-vector-romantic-pink-heart-background-vector-illustration-for-holiday-design-many-flying-hearts-on-white-370450901.jpg" style="width:100%">
    </div>
  </div>
  <div class="w3-col w3-blue w3-container" style="width:2%">
    <p>30%</p>
  </div>
  <div class="w3-col w3-purple w3-container" style="width:20%">
    <p>10%</p>
  </div>
</div>

Answer 1

您缺少网格宽度（例如：s1 s2 s3 ...小屏幕尺寸，最高为s12）

你应该在这里阅读更多信息：

https://www.w3schools.com/w3css/w3css_grid.asp

要将img放入容器中，您可以这样做：

.w3-col {
  height: 75px;
}

img{
  height: 75px;
}

＆＃13;

.item img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.w3-col {
  height: 75px;
}


img{
  height: 75px;
}

＆＃13;

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-row">
  <div class="w3-col w3-green w3-container s3 w3-center">
    <div class="item"><img src="https://dummyimage.com/600x400/000/fff"></div>
  </div>
  <div class="w3-col w3-blue w3-container s3 w3-center">
    <p>30%</p>
  </div>
  <div class="w3-col w3-dark-grey w3-container s3 w3-center">
    <p>35%</p>
  </div>
  <div class="w3-col w3-blue w3-container s3 w3-center">
    <p>30%</p>
  </div>
  <div class="w3-col w3-blue w3-container s3 w3-center">
    <div class="item"><img src="https://dummyimage.com/600x400/000/fff" width="100%"></div>
  </div>
  <div class="w3-col w3-blue w3-container s3 w3-center">
    <p>30%</p>
  </div>
  <div class="w3-col w3-purple w3-container s3 w3-center">
    <p>10%</p>
  </div>
</div>

＆＃13;

Answer 2

要使图像适合容器，请在块/单元格内使用bootstrap类缩略图，并在具有缩略图类的div标记内使用图像。然后使用带有引导类img-responsive的image标签。如果您根据容器/单元格使用具有良好纵横比的图像，那将会更好。

请先阅读上述课程，然后再使用。

Answer 3

使用w3容器很好，因为它通过在您的网页中创建扇区为您提供响应式UI。我会说一个很好的选择。并且，您似乎已经正确地实现了它。

关于图像高度的东西，你可以试试＆＃34;身高：自动＆＃34;在你的图像CSS？可能是我没有得到正确的答案！

将4列保持在水平行中

3 个答案: