css - 制作图像以适合其父尺寸

Question

我有一些大尺寸的照片，我想将它们设置为父母的尺寸。如果一次父尺寸是 1200x800，我想将照片尺寸设置为 1200x800，但我也想查看整个图像。如果我的父尺寸是 500x300，我希望图像是 500x300 等等。

这甚至可能吗？我想根据它的父尺寸缩小或扩大它。

谢谢！

Answer 1

您想要的 css 属性是max-width：

CSS

img {
    max-width:100%;
}

您可以在图像周围添加一个容器并设置overflow:hidden为防止图像变得大于定义的宽度/高度。

Answer 2

使用这段 css 来缩放你的图像：

img {
    max-width: 100%;
    max-height: 100%;
}

Answer 3

我可能很天真，但这不就是这么简单吗？

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

Answer 4

在图片标签中试试这个

<img src="url.jpg" width="100%" height="100%" />

或者将元素的背景设置为图像并执行相同操作。

Answer 5

如果图像大于您必须设置的父容器：

img {
    max-width: 100%;
}

如果您的图像较小，则必须设置

img {
    min-width: 100%;
}

否则它将保持原来的宽度和高度。

（高度默认设置为自动）

Answer 6

尝试使用 max-width 属性，这可能会在早期版本的 IE 中出现错误

#custom img {
    max-width: 100%;
    max-height: 100%;
}

Answer 7

一般来说，记住这一点可能会有所帮助：

1：轨道不是容器。

2：网格区域不是容器。

3：嵌套元素不是容器，除非你这样声明它。

诸如max-width: 100%、object-fit: contains等声明描述了元素（例如 img）在其容器内的行为- 而不是在它恰好放置的轨道或区域内。而不是在标记它所在的位置，嵌套在其容器内。例如之后

HTML：

<div class="myContainer">
    <div class="myTopRow">
        <img src="myPic.jpg">
    </div>
    <div class="myBottomRow">
        <span class="mySubText">Your subtext here.</span>
    </div>
</div>

CSS:
.myContainer {
    display: grid;
    grid-template-rows:  [row1Start] 1fr [row1End row2Start] 1fr [row2End];
    grid-template-columns: [col1Start] 1fr [col1End];
}

.myTopRow {
    grid-rows: row1Start / row1End;
    grid-columns: col1Start / col1End;    
}

.myBottomRow {
    grid-rows: row2Start / row2End;
    grid-columns: col1Start / col2End;
}

.myTopRow img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

你已经制作了一个由一列和两行组成的网格。顶行中的图像似乎会溢出到第二行，与该行的跨越文本发生冲突。实际上没有溢出 - 图像不包含在顶行中（它没有被声明为容器，但“仅仅是”一个跨越轨道的区域）。在它的实际容器（整个两行盒子）中，图像被完美地包含。