Question

我创建了一个名为＆＃34; responsive_image＆＃34;的类的div。在div里面我有一个img标签。代码是，

<div class="responsive_image">
<img src="img1.png"/>
</div>

css代码是，

.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}

.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}

实际上，laptop.png图像是尺寸为310x186的原始笔记本电脑图像，其内部是尺寸为240x160的图像，应正确固定在笔记本电脑图像内。

从上面的代码中看，一切似乎都很完美，但在进行响应时，我每次都需要调整.responsive_image img中的左上角和左上角。是否有任何解决方案，以便我不需要改变顶部和左侧？

Answer 1

您必须从width:100%课程中删除.responsive_image。并根据您的笔记本电脑图片大小提供width:310px

您还使用了percentage top and left位置。使用pixel进行更改。百分比始终具有根据屏幕大小的动态行为。仅在构建html的主结构时使用百分比。

.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}

.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}

与css中的背景图像的响应问题

1 个答案: