图像拉伸或挤压，当我开始改变浏览器大小时

Question

我有一个 2000x350 图像，我想在每个显示器中填充 350 像素高度。使用我的代码，当我开始更改浏览器或视图大小时，图像开始拉伸或挤压。我想让那个图像居中并填充我的固定高度。

有代码

HTML代码：

<div class="content">
    <img src="image.png" class="image">
</div>

CSS 代码：

.content{
    display:block;
}

.image{
    width:100%;
    height: 350px;
    background-position:center;
    background-size: cover;
    -o-background-size: cover;
}

There is fiddle ,以我为例

感谢帮助！
对不起我的英语，那不是我的母语:)

Answer 1

也许你可以尝试使用 css 中的 background-image:

.content{
  display:block;
  background-image: url('http://www.toddsucherman.com/wp-content/uploads/2013/08/ToddSucherman-2000x350-01.jpg');
  background-position: top, center;
  backgorund-height: 350px;
  background-repeat: no-repeat;
}

查看结果：https://jsfiddle.net/51ouqj54/

Answer 2

使用CSS3 Flexbox布局模式：

从 .image

width: 100%

将 .content 描述为：

.content{
  display: flex;
  justify-content: center;
  width: inherit;
  overflow: hidden;
}

这里是 fiddle： https://jsfiddle.net/warkentien2/s1sfL2au/3/

Answer 3

你应该是背景图片，现在你正在使用 img 标签 html 使用此代码。

Html代码

<div class="content"></div>

CSS代码

.content{background:url(http://www.toddsucherman.com/wp-ontent/uploads/2013/08/ToddSucherman-2000x350-01.jpg) no-repeat center center;

背景尺寸：封面； }

图像拉伸或挤压，当我开始改变浏览器大小时

Image stretching or squeezing ,when I start to change browser size

html

css

responsive