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

Css

img {
    max-width:100%;
}

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

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

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

字符串

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

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

字符串

一般来说，记住这一点可能会有所帮助：
1：轨道不是容器。
2：网格区域不是容器。
3：嵌套元素不是容器**，除非声明为容器。**

• max-width之类的声明：100%，对象拟合：contain* 等描述了元素（例如img）在其容器中的行为-而不是在它碰巧被放置的轨道或区域中。而不是在它所在的标记中，而是嵌套在它的容器中。例如在

超文本标记语言：

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

字符串
你做了一个由一列和两行组成的网格。顶行中的图像看起来会溢出到第二行，与该行的跨行文本发生冲突。实际上没有溢出-图像不包含在顶行中（顶行没有被声明为容器，而“仅仅”是一个跨越轨道的区域）。在它的实际容器（整个两行框）中，图像被完美地包含。

在图像标签中尝试此操作

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

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

如果镜像比父容器大，则需要设置：

img {
    max-width: 100%;
}

字符串
如果您的图像较小，则必须设置为

img {
    min-width: 100%;
}

型
否则，它将仅停留在其原始宽度和高度。
(the高度默认设置为 auto）

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

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

字符串

width: inherit;
height: inherit;
object-fit: contain;

字符串

在某些情况下，我们需要处理大量的图像大小，其中一些可能需要水平缩放，另一些可能需要垂直缩放，还有一些可能需要两者兼而有之。当使用max-[width|height]属性时，最短的维度不会完全缩放。这意味着：

• width > height的图像：会有一个垂直的间隙
• height > width的图像：会有一个水平间隙

为了解决这个问题，基本上可以缩放以适应和object-fit属性将允许纵横比神奇地保持不变：

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

字符串
要控制大小，请使用 Package 器元素和适当的样式。