Img不尊重宽度在html(与flexbox)

2022-01-28 16:23:26 标签 htmlcssflexboxwidth

我有一些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: 100%;
}
.img-bar img {
  object-fit: cover;
  width: 300px;
  height: 300px;
}

所有的图像文件都有尺寸>300px * 300px,所以我希望它们遵循CSS规则。然而,正如你从下面的照片中看到的,第二张图片不符合规则(它的高度大于宽度)。作为参考,该图像文件的实际尺寸为934px x 1401px。

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

###你想设置容器的尺寸,然后让里面的图像扩展来填充它。我会这样重组:

img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}
.img-bar {
  display:flex;
  width: 300px;
  height: 300px;
}

这当然适用于所有的图像,所以你可能想要为img-bar内的图像添加一个类,或者为包含主图像的图形元素设置尺寸。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码