Question

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

有代码

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布局模式：

从width: 100%

.image

将.content描述为：

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

这是一个小提琴： https://jsfiddle.net/warkentien2/s1sfL2au/3/

Answer 3

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

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;

背景尺寸：盖; }

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

3 个答案: