Question

我有一个图像包装器：

<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响应？

Answer 1

你需要在行尾添加半冒号而不是逗号

也是它的

.wrapper {

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

}

如果你给你的包装器一个宽度

.wrapper {

display: inline-block;
width: 100%;

} 然后给你的形象

img {

 max-width: 100%;

}

然后您的图片应该在您的包装div中保持响应

Answer 2

首先如@certifiedmay所述，使用;代替,

让wrapper使用width的{{1}}展开width

将image更改为display

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;
}

您可以看到红色的包装边框和黑色的图像边框

如何使包装器的宽度与图像内的宽度相同？

2 个答案: