如何製作與圖片內容相同寬度的包裝？

我有一個包裝周圍的圖像：如何製作與圖片內容相同寬度的包裝？

<div class="wrapper"> 
    <img class="image" src="image.jpg"/> 
</div>

這裏是css：

wrapper { 
    backgroundImage: `url(image.jpg)`, 
    backgroundSize: contain, 
    display: block, 
    padding: 0px, 
    position: relative, 
    height: auto, 
    width: 100% 
} 

image { 
    border: 0px, 
    height: auto, 
    left: 0px, 
    opacity: 0, 
    padding: 0px, 
    position: absolute, 
    top: 0px, 
    width: 100% 
}

爲什麼wrapper不能拉伸，相同的寬度裏面的image？我如何使這項工作，並保持image和wrapper響應？

來源

2015-11-26 jhamm

如果這就是你要求的，父母不會擴大以適應子女的寬度。如果這不是一個規則，佈局會打破（他們這樣做，因爲IE6得到了這個規則錯誤... http://www.positioniseverything.net/explorer/expandingboxbug.html） –

你需要把分號在你行的末尾沒有逗號

也是其

.wrapper {

background-image: url('image.jpg'); 
background-size: contain;

}

如果你給你一個包裝寬度

.wrapper {

display: inline-block; 
width: 100%;

} 然後給你的形象

IMG {

max-width: 100%;

}

圖像由@certifiedmay提到則應保持響應您的包裝DIV中

來源

2015-11-26 18:14:31 certifiedmay

第一用戶;而不是,

爲了讓您wrapper擴大width與image

變化的widthdisplay到inline-block

.wrapper {  
 
    display:inline-block; 
 
    padding: 0px;   
 
    border:1px solid black; 
 
} 
 

 
.image { 
 
    left: 0px; 
 
    opacity: 1; 
 
    padding: 0px; 
 
    position: absolute; 
 
    top: 0px; 
 
    width: 100px; 
 
    height:100px; 
 
    border:1px solid red; 
 
}

<div class="wrapper"> 
 
    <img class="image" src="http://i.stack.imgur.com/NSX3P.png"/> 
 
</div>

你可以看到包裝紅色邊框的色彩和圖像邊框黑色

來源

2015-11-26 19:10:02

如何製作與圖片內容相同寬度的包裝？

回答

相關問題