gpt4 book ai didi

css - 流式布局 : 100% max-width img not applied - why?

转载 作者:太空宇宙 更新时间:2023-11-04 15:40:27 25 4
gpt4 key购买 nike

我对这种流式布局完全陌生。我注意到,和我们大多数人一样,虽然我的大部分布局组件都“液化”了,但不幸的是,图像却没有。

所以我尝试按照几个地方的建议在图像上使用 max-width: 100%

但是,尽管定义了 img 容器max-widthmin-heightimg 不要缩放。

如果您在宽分辨率下查看它,您会注意到“ child 图像”等不会缩放。

关于问题可能是什么的任何线索,为什么该图像无法缩放?

测试用例:

浏览器:Firefox 15.0/Chrome 21.0

IOS:MAC OS X Lion - 10.7.3

分辨率:1920x1200

我得到的:我得到一个图像,直到它的容器结束时才会缩放。img 宽度不适合包含它的 article 元素。 image should scale as the arrow indicates

我的期望:我希望图像能够放大,直到它到达容器的末端。从视觉上看,我希望图像与下面的段落一样宽,图像的右侧与下面段落的右侧保持垂直对齐。

最佳答案

我认为您误解了 max-width 的作用。

max-width:100% 表示“该元素的最大宽度可以是其容器的 100%”。任何自然较小的东西都不会受到影响。这就是您现在所拥有的,并且工作正常。如果你使用 max-width:800px,这意味着“永远不要让这个图像超过 800px 宽”,它不会强制宽度为 800px,这就是 width是为了。

width:100% 表示“此元素应始终为其容器宽度的 100%”。任何通常较小的东西现在必须占据整个宽度。任何更大的东西都会缩小到容器的宽度。

对于您的情况,只需使用 width:100% 并调整实际图像的大小以适应实际的最大值(并为容器选择一个合理的最大宽度)。图片通常在缩小时比放大时看起来更好,但在针对移动设备进行优化时,您可能希望做相反的事情。

您通常将 max-width:100% 视为默认样式的原因是图像不会超出其容器并破坏布局,因为图像通常按其实际宽度自然调整大小.

关于css - 流式布局 : 100% max-width img not applied - why?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12202673/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com