Question

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

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

注意页面的标题图片，格式为4k px。

尝试：我有一个数字元素100％全屏宽度和200px高度。里面的图像是图元素的100％，高度也是图元素的100％。

注意：我知道这个例子中的图像是600乘400.我已经在1920年到1084年尝试了更高的图像尺寸，同样的问题？（图像大小和分辨率之间是否存在差异？）

我的图片尺寸是问题还是应该有特定的解决方案来解决这个问题？或者代码可能不正确？

我尝试过不同尺寸的图片。当完整的出血横幅（4k）需要时，我应该有特定尺寸的图像吗？

HTML

＆＃13;

/* ## 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%;
}

＆＃13;

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

＆＃13;

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像素。

试图创建一个完整的出血横幅图像？（扭曲）

1 个答案:

试图创建一个完整的出血横幅图像？ （扭曲）

1 个答案:

试图创建一个完整的出血横幅图像？（扭曲）