如何设置图像的宽度和高度而不拉伸它？

Question

如果我有:

#logo {
    width: 400px;
    height: 200px;
}

然后

<img id="logo" src="logo.jpg"/>

将拉伸以填补该空间.我希望图像保持相同的大小,但是它要占用DOM中的那么多空间.我是否需要添加封装<div>或<span>？我讨厌为样式添加标记.

Answer 1

是的,你需要一个封装div:

<div id="logo"><img src="logo.jpg"></div>

有类似的东西:

#logo { height: 100px; width: 200px; overflow: hidden; }

其他解决方案(填充,边距)更繁琐(因为您需要根据图像的尺寸计算正确的值),但也不能有效地允许容器小于图像.

而且,对于不同的布局,上述内容可以更容易地进行调整.例如,如果您想要右下方的图像:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Answer 2

您可以添加img到您的CSS,它将自动裁剪图像

Answer 3

加载图像作为div的背景.

代替:

<img id='logo' src='picture.jpg'>

做

<div id='logo' style='background:url(picture.jpg)'></div>

所有浏览器都会裁剪掉不适合的图像部分.
这有几个优点,包括一个隐藏溢出的元素:

1. 没有额外的标记.div只是取代了img.
2. 轻松居中或将图像设置为另一个偏移.例如.url(pic) center top;
3. 当足够小时重复图像.(好吧,不知道为什么你会想要那个)
4. 在同一语句中设置bg颜色,轻松将同一图像应用于多个元素,以及适用于bg图像的所有内容.

Answer 4

CSS3对象适合

我不确定webkit,IE和firefox实现了多远.但是Opera就像魔术一样

object-fit使用SVG内容,但通过preserveAspectRatio=""在SVG本身中设置属性也可以实现相同的效果.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

克里斯·米尔斯演示了它http://dev.opera.com/articles/view/css3-object-fit-object-position/

Answer 5

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Answer 6

<img style="object-fit: contain" src="...">

非常适合我。

Answer 7

做一个div并给它一个班级.然后在其中放一个img.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

设置div的大小并使其相对.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

然后设计你的形象

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

希望有所帮助