html - 让 div 中的图像在浏览器调整大小时收缩

Question

我目前有以下 HTML 和 CSS:

HTML

<section id={styles.rowTwo} className={styles.row}>
    <h1 className={styles.rowHeaderText}>NAS Component</h1>
    <div id={styles.rowTwoContainer}>
        <div id={styles.hardwareList}>
            <h3>Hardware</h3>
            <div id={styles.componentContainer}>
                <div id={styles.componentImageContainer}>
                    <img id={styles.componentImage} src={require('../../img/ram.png')}/>
                </div>
                <p id={styles.componentText}>RAM: 16GB DDR3 1600Mhz ECC</p>
            </div>
        </div>
        <div id={styles.softwareList}>
            <h3>Software</h3>
        </div>
    </div>
</section>

CSS

.row {
    width: 100%;
    background-color: green;
    display: flex;
    flex-direction: column;
}

#rowTwoContainer {
    display: flex;
}

#hardwareList {
    width: 70%;
}

#softwareList {
    width: 30%;
}


#componentContainer {
    display: flex;
}

#componentImageContainer {
    width: 30%;
}

#componentText {
    width: 70%;
}

问题是当我调整浏览器窗口大小时，左边的图像没有调整大小。我希望它随着浏览器窗口大小的变化而缩小。

关于 SO 我已经尝试过很多答案，这些答案允许调整图像大小，但不幸的是，当浏览器的宽度为 1400 像素(为我的页面定义的宽度)时，图像会被拉伸(stretch)。

额外信息:

有一个 div 封装了上面显示的所有内容，其 width 为 1400px。

图像的尺寸为:38 x 71 像素。

感谢您的帮助。

Answer 1

这篇文章过去曾帮助我为元素提供一个背景图像，该图像可以在浏览器调整大小时很好地调整大小。

https://css-tricks.com/perfect-full-page-background-image/

本文的要点是您可以创建一个 HTML 元素，使用 CSS 在其上设置背景图像，这将很好地调整大小。在这种情况下，它是 HTML 标记的背景图像，但该规则也应适用于其他元素。

html { 
  background: url('images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}