Question

通过纯 CSS 修复图像响应

2017-10-30

96

html css responsive

我运行一个基于 Django 的 instagram 克隆版，用户可以在其中与他人共享照片。照片的样式使其看起来像宝丽来照片。此外，标题是添加在宝丽来样式内，而不是在其外部。以下是示例：

我的问题是：如何使图像响应（纯 CSS）？目前，它的宽高比会因较小的窗口而倾斜（只有宽度是响应的，高度不是）。观察：

这是我的代码当前的样子：

<style>

.polaroid{
    text-align:center;
    background-color: #ffffff;
    display: inline-block;
    padding: 10px;
    -webkit-box-shadow: 3px 3px 3px #9E9E9E; 
    -moz-box-shadow: 3px 3px 3px #9E9E9E;
    box-shadow: 3px 3px 3px #9E9E9E;
}

.inner_img{
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
}

.img_caption{
    display: table-caption;
    caption-side: bottom;
    width:100%;
}

</style>

<div class="polaroid">
<img src="{{ tup.1|s3 }}" width="{{ tup.3 }}" height="{{ tup.4 }}" class="inner_img" alt="photo">
<div class="img_caption">{{ tup.5 }}</div>                       
</div>

注释 I：我更愿意坚持使用受良好支持的 HTML4/CSS2 元素（如 caniuse.com 上所列），以实现最大兼容性。

注释 II：不要对包含 {{ }> 的语法感到惊慌。这些是 Django 模板变量，包含 html 标签的有用值。例如对于此特定图像， width="{{ tup.3 }}" height="{{ tup.4 }}" 转换为 width="300" height="224" 。

Answer 1

要保持图像的纵横比，请添加：

img {
   height: auto;
   width: 100%;
}

JiiB

2017-10-30

Answer 2

用于响应式图像。

img{
    display: block;
    height: auto;
    margin-left: auto; /* For center the image */
    margin-right: auto; /* For center the image */
    max-width: 100%;
}

Answer 3

@Hassan Baig，

您应该避免同时提及“width”和“height”属性，否则图像会像这样被拉伸。

对于这种情况，您应该从 HTML 中的图像中删除“height”属性，或者您可以在 CSS 中添加“height：auto !important”以覆盖内联样式。

“!important”将覆盖现有的高度值，并允许图像根据宽度自动设置高度。

希望这会有所帮助！