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

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

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

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

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

Answer 4

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

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