IMG不尊重html中的宽度（使用flexbox）

顺晟科技

2021-09-14 12:45:29

110

我有一些html可以在顶部创建图像，在下面创建图像库。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>your page title goes here</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="container">
    <h1>My Photo Gallery</h1>
    <div class="gallery">
      <figure>
        <img src="img/dog1.jpeg" alt="first dog">
        <figcaption>Example Photo</figcaption>
      </figure>
      <div class="img-bar">
        <img src="img/dog2.jpeg" alt="second dog"/>
        <img src="img/dog3.jpeg" alt="third dog"/>
        <img src="img/dog4.jpeg" alt="fourth dog"/>
        <img src="img/dog5.jpeg" alt="fifth dog"/>
      </div>
    </div>
  </div>
</body>
</html>

为了设置图像库的样式，我添加了以下样式:

.img-bar{
  display: flex;
}

img {
  width: ;
}

.img-bar img {
  object-fit: cover;
  width: 300px;
  height: 300px;
}

所有图像文件的尺寸都>300px×300px，所以我希望它们遵循CSS规则。然而，正如你可以从下面的照片中看到的，第二张图像不遵循规则（它比它宽高）。作为参考，该图像文件的实际尺寸为934pxx1401px.

任何帮助都将不胜感激！谢谢。

顺晟科技：

您想要设置容器的尺寸，然后让里面的图像展开来填充它。我会像这样重新洗牌:

img {
  width: ;
  height: ;
  object-fit:cover;
}

.img-bar {
  display:flex;
  width: 300px;
  height: 300px;
}

这当然适用于所有图像，因此您可能希望为img-bar中的图像添加一个类，或者为包含主图像的figure元素设置尺寸。

上一篇：Shiny::ShowModal不适下一篇：前端开发一般用什么软件比较好？

网站建设

Html

IMG不尊重html中的宽度（使用flexbox）