css - 有没有其他方法可以在页面中以不同分辨率将图像定位在特定位置
问题描述
在这里,我尝试在第一个居中对齐的部分中添加 2 个图像,第二个位于第一个图像旁边,但是通过使用以下代码,我在第二个图像的不同分辨率下遇到问题是否有任何替代方法可以保持一致在决议中的定位?参考图片。
main.uni-design {
background-image: url("../images/ban2.jpg");
max-height: 1000px;
max-width: 100%;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
position: relative;
}
img.mob {
position: absolute;
bottom: -23px;
right: 0%;
}
@media only screen and (min-width: 768px) {
img.mob {
position: absolute;
bottom: -23px;
right: 7%;
}
}
@media only screen and (min-width: 992px) {
img.mob {
position: absolute;
bottom: -23px;
right: 16%;
}
}
@media only screen and (min-width: 1280px) {
img.mob {
position: absolute;
bottom: -23px;
right: 23%;
}
@media only screen and (min-width: 1400px) {
img.mob {
position: absolute;
bottom: -23px;
right: 27%;
}
<html>
<main class="uni-design pt-5">
<div class="container">
<h3>For all devices</h3>
<h3 class="bt">Unique design</h3>
<div class="clearfix"></div>
<img src="images/tab.png" class="img-fluid pt-4" />
<img src="images/mobnew.png" class="img-fluid mob" />
</div>
</main>
</html>
解决方案
我只是习惯margin
用 flexbox 方法覆盖移动图像。我希望这对你有帮助。
.res-design {
display: flex;
justify-content: center;
}
.res-design .mobile {
align-self: flex-end;
margin: 0 0 0 -8%;
border: 1px solid;
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<main>
<div class="container my-5">
<div class="res-design">
<img src="https://via.placeholder.com/600x400.png" class="img-fluid tab" />
<img src="https://via.placeholder.com/150x200.png" class="img-fluid mobile" />
</div>
</div>
</main>
推荐阅读
- python-3.x - 通过所有列绘制直方图
- php - 我需要成为 abel 来过滤一张桌子,谁能告诉我怎么了
- plotly - 为 jupyter lab 安装 plotly-extension 时出错
- git - GitHub - 如何在 2 个 GitHub 存储库之间实时同步?
- generics - Star 投影集合中的特定 KClass
- php - 在 codeigniter 中向会话变量添加新值
- android - 如何使用 OpenCV 处理自定义相机拍摄的图片
- lan - 当win pc连接到局域网路由器时停止响应
- reporting-services - ssrs 上的动态图
- go - Golang获取结构字段的字符串名称