html - 以相同宽度和高度缩放的移动网站的响应式图像

Question

我有点受困于我微薄的 CSS 技能。我有一个 Bootstrap 面板和一个网格布局，其中一行包含 3 个图像。

我的问题是我从网络服务获得的图像在大小上都非常不同。有些是高清画质，有些是 80 X 80 像素。我想使用 css 并使所有三个图像显示相同的大小。图片也必须是响应式的，因为这是一个移动网站。我找到了一个可以满足我要求的解决方案，但 android 上的库存浏览器不支持 vw 和 vh。我目前的解决方案如下。

<div class="panel panel-default">
                    <div class="panel-heading text-center"><span class="colorText greenText21">Photo Gallery</span></div>
                    <div class="panel-body">
                        <div class="row text-center">
                            <div class="col-xs-4 text-center">
                                <img src="Images/c1.png" style="width: 21vw; height: 18vw" alt="Image" class="text-center" id="gallery_Image1" />
                            </div>

                            <div class="col-xs-4 text-center">
                                <img src="Images/c2.png" style="width: 21vw; height: 18vw; " alt="Image" class="text-center" id="gallery_Image2" />
                            </div>

                            <div class="col-xs-4 text-center">
                                <img src="Images/c3.png" style="width: 21vw; height: 18vw; " alt="Image" class="text-center" id="gallery_Image3" />
                            </div>
                        </div>

                    </div>
                </div>

是否有一个简单的 css 跨浏览器解决方案，可以让我将所有三个图像设置为相同大小，同时也具有响应能力？

预先感谢您的帮助。

Answer 1

尝试在您的 img 标签上添加这个类

.img-responsive

Boostrap 3 - 响应式图片

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.