尝试创建全出血横幅图像？ （失真）

Question

所以我想创建一个固定高度的全出血标题图像。问题是图像被像素化和拉伸。

我想要类似的东西： http://www.laserelectrical.com.au/residential-maintenance

请注意页面的标题图像以 4k 像素为单位。

尝试：我有一个 100% 屏幕全宽和 200 像素高度的图形元素。里面的图片是图形元素的100%，高度也是图形元素的100%。

注意：我知道这个例子中的图像是 600 x 400。我尝试过更高的图像尺寸，1920 x 1084，同样的问题吗？ （图片大小和分辨率有区别吗？）

是我的图像尺寸有问题还是应该有特定的分辨率来解决这个问题？或者代码不正确？

我尝试了不同尺寸的图像。当需要全出血横幅 (4k) 时，我应该将特定尺寸的图像作为标准吗？

HTML

/* ## Service Page (Page.php) */
.page .site-content {
	max-width: 100%;
}
#page-header-container {
	width: 100%;
 
	 }

.service-full-bleed {
	margin: 0;
	height: 200px;

 }
.service-full-bleed img {
	width: 100%;
	height: 100%;
}

<figure class="featured-image service-full-bleed">
<img src="https://placeimg.com/640/480/any">	
		</figure>

Answer 1

问题是您在前景中使用宽度和高度为 100% 的图像。您基本上是将图像的大小调整为容器的大小，因此如果纵横比不同，则会对其进行拉伸。您可以使用 Lwin Htoo Ko 的解决方案并将overflow: hidden 添加到.service-full-bleed，或者您可以使用背景图片代替：

.page .site-content {
    max-width: 100%;
}
#page-header-container {
    width: 100%; 
}

.service-full-bleed {
    margin: 0;
    height: 200px;
    width:100%;
    background: url("https://placeimg.com/640/480/any");
    background-size:cover;
 }

<figure class="featured-image service-full-bleed" />

请注意，在这两种情况下，您只显示图像的顶部。您可以使用position:relative; top: -Xpx 将图像移动 X 像素。