如何在div中自动调整图像高度。

Question

在我的情况下，我有一个尺寸为1587 * 666的图像。我希望将此图像放在高度为600px且宽度为300px的div中。但我没有成功做到这一点。任何人都可以帮我举例。

这是一个代码。

<div id="myDiv" style="width:300px; height:600px;">
<img src="top_add.png"/>
</div>

Answer 1

将图片标记的宽度和高度指定为＆＃34; 100％＆＃34; 或＆＃34;继承＆＃34;

继承属性集父标签的高度和宽度。

onCreate()

或

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

Answer 2

只需将图片设置为100％。

<强> HTML

<div id="myDiv">
<img src="top_add.png"/>
</div>

<强> CSS

img{
    width: 100%;
}
#myDiv{
    width:300px;
    height:600px;
}

我建议您不要使用内联样式

Answer 3

如果设置宽度和高度以及一天更改图像，它将以不良方式缩放。 把它作为风格的背景放在那里要好得多。这是一个例子：

height: 600px;
width: 300px;
background: url('path_to_your/image.jpg'); 
background-size: cover; 
background-position: center center;