背景图像（CSS）的缩放宽度问题

我是一个图像的哈维格麻烦，通过使用CSS中的“包含”在顶部图像和下一个段落之间添加了巨大的间距。当我使用“覆盖”没有间距问题，但图片宽度太高。背景图像（CSS）的缩放宽度问题

我使用这个在CSS

.headerLine{ 
position: relative; 
width: 100%; 
overflow: hidden; 
height: auto; 
background-repeat: no-repeat; 
background-position: center top; 
background-image: url(../images/bgTop.jpg); 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: contain;

我upoaded 100％的桌面图片，使用Cover，采用包含一个用于所希望的结果在这里：Description

来源

2016-02-08 user2279956

你有没有考虑包括图像作为<img>而不是作为背景图片？这将导致headerLine div动态更改高度以匹配子图像。

HTML：

<div class="headerLine"> 
    <img src="sampleimg.jpg" alt="Sample Image" width="600" height="200"> 
</div>

CSS：

.headerLine img { 
    display: block; 
    width: 100%; 
    height: auto; 
}

从W3学校关于背景大小：

背景封面：

缩放的背景图像是作为大尽可能让背景区域完全被背景图像覆盖。一些份背景图像可能无法考虑到背景定位区域背景罩内将缩放图像

背景内含：

缩放图像以最大尺寸，使得它的两个宽度和其高度可以适合内容区域

来源

2016-02-08 23:30:50 Carlton

背景图像（CSS）的缩放宽度问题

回答

相关问题