有图像（没有容器）没有拉伸

Question

我希望我的图像不被拉伸，也没有滚动条。因此，当浏览器窗口缩小时，图像仍然是相同的大小（但隐藏溢出）。

<img src="http://nybbledesigns.com/images/header.jpg"/>

JsFiddle：http://jsfiddle.net/6ppL9axc/

我找到了带容器的解决方案，但我需要一个没有容器的解决方案。

有什么想法吗？

Answer 1

尝试一下：

＆＃13;

＆＃13;

img {
    position: fixed;
    overflow: auto;
}

＆＃13;

<img src="http://nybbledesigns.com/images/header.jpg"/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我制作了一个背景版本，希望它可以提供帮助。

<div></div>
div {
width:100%;height:60vh;
background-image:url("http://nybbledesigns.com/images/header.jpg");
background-repeat:no-repeat;

}

vh相对于设备屏幕高度，因此相对于屏幕高度，60vh将是60％ 在任何时候，无论哪个设备:)

Answer 3

尝试

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

它会永远禁用滚动条〜

Answer 4

试试这个 img {max-width:100%;}

Answer 5

这可以使用新的CSS属性object-fit（Currently webkit only, but soon to be supported in other browsers）

来完成

只需在object-fit: cover;宽度上设置img最大宽度和固定高度。

这基本上相当于将background-size:cover应用于背景图片，不同之处在于我们将其应用于img元素。

<强> FIDDLE

＆＃13;

＆＃13;

body {
  margin: 0;
}
img {
  object-fit: cover;
  max-width: 100%;
  height: 513px;
}

＆＃13;

<img src="http://nybbledesigns.com/images/header.jpg" />

＆＃13;

＆＃13;

＆＃13;