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

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

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

Answer 6

如果图片比您必须设置的父容器大，则：

img {
    max-width: 100%;
}

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

img {
    min-width: 100%;
}

否则它将仅保留其原始宽度和高度。

（默认情况下，“高度”设置为 auto ）

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;
}

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

制作适合其父级尺寸的图像

7 个答案: