Question

我有以下代码在我的页面中显示图像（在class =＆＃34;浮动框＆＃34;内）：

<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;
}

问题是我看不到所有图像的统一尺寸。较小的图像不会拉伸。有什么想法吗？

感谢。

Answer 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 />

Answer 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>

html中图像的统一大小问题

2 个答案: