Html 通过纯CSS修复图像响应性

我运行了一个基于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>

.宝丽来{
文本对齐：居中；
背景色：#ffffff；
显示：内联块；
填充：10px；
-网络工具包盒阴影：3px 3px 3px#9E9E9E；
-moz盒阴影：3px 3px 3px#9E9E9E；
盒影：3px 3px 3px#9E9E9E；
}
.内{
显示：块；
保证金：0自动；
边缘底部：20px；
宽度：100%；
}
.img_说明{
显示：表格标题；
标题侧：底部；
宽度：100%；
}
{{tup.5}}

---

注一：我更愿意坚持使用支持良好的HTML4/CSS2元素（如caniuse.com上所列），以获得最大的兼容性

注二：不要对包含

{{}

的语法感到惊慌。这些是Django模板变量，包含html标记的有用值。例如，

width=“{tup.3}}”height=“{{tup.4}}”

对于这个特定的图像转换为

width=“300”height=“224”

。

对于响应图像

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

为响应图像

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

---

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

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

---

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

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

@哈桑·贝格

您应该避免同时提到“宽度”和“高度”属性，否则图像会像这样拉伸

对于这种情况，您应该从HTML格式的图像中删除“height”属性，或者可以添加“height:auto！”！CSS中的“要点”以覆盖内联样式

"!！“重要信息”将覆盖现有高度值，并允许图像根据宽度自动设置高度

希望这会有帮助

@Hassan Baig

您应该避免同时提到“宽度”和“高度”属性，否则图像会像这样拉伸

对于这种情况，您应该从HTML格式的图像中删除“height”属性，或者可以添加“height:auto！”！CSS中的“要点”以覆盖内联样式

"!！“重要信息”将覆盖现有高度值，并允许图像根据宽度自动设置高度

---

希望这会有帮助

你的IMG标签（html）中有硬编码的高度，这就产生了问题。

---

只需从IMG标记中删除height参数，图像就会自动调整。

您的IMG标记（html）中有硬编码的高度，这就产生了问题。

---

只需从IMG标记中删除height参数，图像就会自动调整。

您应该删除图像的内联高度和宽度，并将CSS中的图像宽度和高度设置为：

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

---

您应该删除图像的内联高度和宽度，并将CSS中的图像宽度和高度设置为：

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

---

尝试更改div的最大宽度以查看它是否响应

div{
显示：表格；
最大宽度：100px；
}
img{
显示：表格；
保证金：0自动；
宽度：100%；
}
标签{
显示：表格；
保证金：0自动；
}

---

哦，我的天啊，这个地方太美了，请帮我买比萨饼

试着改变div的最大宽度，看看它是否有反应

div{
显示：表格；
最大宽度：100px；
}
img{
显示：表格；
保证金：0自动；
宽度：100%；
}
标签{
显示：表格；
保证金：0自动；
}

哦，我的天啊，这地方太美了，请帮我买比萨饼

试试这个

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

希望它能起作用试试这个

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

---

---

希望它能起作用

你想做的是不合逻辑的。如果它失去宽度，它必须增加高度。这已经是响应性的了。如果您希望降低高度，可以使用所使用的字体smaller@MarcoSalerno：我想保持

的纵横比不变。足够逻辑吗？只需添加高度：自动；给你img@Jiib字体漂亮而简单。请加上这句话作为回答：-）你想做的是不合逻辑的。如果它失去宽度，它必须增加高度。这已经是响应性的了。如果您希望降低高度，可以使用所使用的字体smaller@MarcoSalerno：我想保持

的纵横比不变。足够逻辑吗？只需添加高度：自动；给你img@Jiib字体漂亮而简单。请补充回答：-）有趣，我为什么不提高度？想进一步解释吗？我认为这有助于DOM处理和渲染，根据w3schools：始终为图像指定

height

和

width

属性。如果设置了

高度

和

宽度

，则加载页面时会保留图像所需的空间。是。我接受。但这不是强制性的。我不是说，你不应该使用“高度”属性。您可以通过“自动”进行设置！“重要”。它应该覆盖任何设置为内联样式的“height”属性值。虽然我在

img

标记中硬记录了高度和宽度，但我注意到，在加载图像之前，我的浏览器为图像的高度保留了足够的空间，但它没有为宽度保留任何空间。你知道会发生什么吗？有趣的是，我为什么不提高度？想进一步解释吗？我认为这有助于DOM处理和渲染，根据w3schools：始终为图像指定

height

和

width

属性。如果设置了

高度

和

宽度

，则加载页面时会保留图像所需的空间。是。我接受。但这不是强制性的。我不是说，你不应该使用“高度”属性。您可以通过“自动”进行设置！“重要”。它应该覆盖任何设置为内联样式的“height”属性值。虽然我是hardco