html中图像大小统一的问题答案

【问题标题】：Issue with uniform size for images in htmlhtml中图像大小统一的问题
【发布时间】：2023-03-15 17:29:01
【问题描述】：

我有以下代码用于在我的页面中显示图像（在 class="floating-box" 内）：

<img style="display: block; margin: 0 auto; max-width: 100%; max-height: 100%; width: auto; height: auto;" ng-src="{{product.image}}"/>

.floating-box {
display: inline-block;
width: 300px;
height: 450px;
margin: 10px;
vertical-align: top;
}

问题是我没有看到所有图像的统一尺寸。较小的图像不会拉伸。知道发生了什么吗？

谢谢。

【问题讨论】：

width: auto% 看起来不对。
… 和 auto 并不意味着拉伸。
我认为自动意味着必要时拉伸？ @昆汀
auto 通常是 CSS 默认值。添加它只是不必要的膨胀标记。
@Ahsan，你检查答案了吗？

标签： html css css-float

【解决方案1】：

如果您希望图像**最大* 100% 的原始宽度并且该高度会相应调整（拉伸以保持原始图像比例），您可以使用：

<img style="max-width: 100%; height: auto;" src="" />

如果您希望图像占据视口的 100%（可用空间的 100%）并且高度也会相应调整（拉伸以保持原始图像比例），您可以使用：

<img style="width: 100%; height: auto;" src="" />

我真的建议为此使用类，这样您就不需要为每个图像重新编写所有内联 css。

img.responsive {
  max-width: 100%;
  height: auto;
}
img.full-width {
  width: 100%;
  height: auto;
}

<img class="responsive" src="http://dummyimage.com/100x50/f00/fff" /><br />
<img class="full-width" src="http://dummyimage.com/150x50/0f0/fff" /><br />
<img class="responsive" src="http://dummyimage.com/200x50/ff0/fff" /><br />
<img class="full-width" src="http://dummyimage.com/250x50/0ff/fff" /><br />

【讨论】：

【解决方案2】：

要实现现场统一图片，可以通过NPM使用开源库bootstrap-spacer

npm install uniformimages

或者你可以访问github页面：

https://github.com/chigozieorunta/uniformimages

这是一个使用“unim”类如何工作的示例（为此您需要 jQuery）：

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product2.html">
                        <img src="image2.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product3.html">
                        <img src="image3.jpg" class="unim"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

【讨论】：