Question

如何使图像在特定高度和宽度的div内，而不给img元素任何高度或宽度。这是html代码

<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
  <img id="photo" src="images/minnie-mouse-cartoon-wallpaper-600x600.jpg">
</div>

以下是jsfiddle

Answer 1

使用max-width和max-height来img

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

<强> DEMO

Answer 2

试试这个

CSS

div{
    width: 500px;
    height: 300px;
    display:inline-block;
    vertical-align: top;
}
div img{
    width: 100%;
    height: 100%;
}

HTML

<div>
    <img src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" />
</div>

DEMO

Answer 3

您需要将img height和width设置为100%并在您的div中设置所需的height和width

这种方式与父母的大小相同。

查看他的FIDDLE

Answer 4

当您以百分比形式声明高度和宽度时，子元素将始终引用其父元素。示例中的image元素是div的子元素：

<div class="frame">
    <img id="photo" src="http://hulza.files.wordpress.com/2012/07/brave_still_3.jpg" />
</div>

我将样式移到单独的CSS表单中，JSFiddle给了我内联样式的问题：

.frame{
    margin: 0 0.3em;
    height:300px;
    width:300px;
}

#photo{
    max-height: 100%;
    max-width: 100%;
}

我使用 max 高度和宽度，因为如果父级的宽高比不正确，则不会渲染图像。使用最大前缀，图像将自行调整大小以适应给定的空间并保持其纵横比。这两个案例都在JSFiddle中。

http://jsfiddle.net/LDJGj/1/
http://jsfiddle.net/LDJGj/2/

如何使图像在特定高度和宽度的div内，而不给img元素任何高度或宽度

4 个答案: