Question

我对我微薄的css技能有点困惑。我有一个自举面板和一个网格布局，在一行中包含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 - 响应式图像

通过添加.img响应类，可以使Bootstrap 3中的图像响应友好。这适用于max-width：100％;和身高：汽车;到图像，以便它很好地缩放到父元素。

Answer 2

不同图像的宽高比是相同的（但不是基本的）。

无论如何，使用％而不是＆＃34; vw＆＃34;，将宽度设置为＆＃39; 100％＆＃39;和高度到＆＃39; auto＆＃39;用于IMG标签。它们将包含在内部＆＃39; col-xs-4＆＃39;容器。

Answer 3

我很久以前就用twitter bootstrap遇到了这个问题。我使用了另一个用户jsfiddle提供的这个方法。它将不同尺寸的图像集中在响应容器中。我仍然会尝试使用PHP或其他服务器端代码将图像调整为较小的尺寸，因此您不会将3000px图像的尺寸调整为80px。

JSfiddle

html的

<div class="col-xs-4">
    <div class="dummy"></div>
    <div class="img-container">
        <div class="centerer"></div>
        <img src="/path/to/image" alt=""/>
    </div>
</div>

的CSS

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container .centerer {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

移动网站的响应式图像，具有相同的宽度和高度

3 个答案:

Boostrap 3 - 响应式图像