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

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

我已经尝试了很多答案，它允许图像调整大小但不幸的是，当浏览器的宽度为1400px（为我的页面定义的宽度）时，图像会被拉伸。

额外信息：

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

Answer 2

你在#componentImageContainer上有动态宽度大小，但你的图像没有宽度属性。

将一定比例的容器添加到#componentImage：

#componentImage{
  width: 100% ;
}

额外信息

停止在大尺寸上刮擦图像使用最大宽度属性宽度＆＃34; px＆＃34;价值：

#componentImage{
  width: 100% ;
  max-width: 200px; // for example
}

Answer 3

将以下内容添加到您的css

img {
max-width:100%;
}