我正在为某人建立一个网站,不知怎的,我无法设法使标题中的图像停留在应有的位置。我使用@mobile
来确定屏幕宽度,但它仅适用于我的计算机屏幕。当我移动到另一台计算机时,它总是在左侧或底部。
代码:
@media (min-width: 1203px) {
#profile {
position: relative;
margin-top: -35.5%;
margin-left: -31%;
float: left;
padding-left: 12%
}
#mishpat {
padding-top: 150px;
}
}
@media (max-width: 1203px) {
#profile {
position: relative;
margin-top: -40.4%;
margin-left: -35%;
padding-left: 16%;
padding-top: 6%;
float: left;
}
#mishpat {
padding-top: 150px;
}
}
@media (max-width: 1025px) {
#profile {
position: relative;
margin-top: 3.5%;
margin-left: 10%;
padding-left: 16%;
padding-top: 0px;
float: left;
}
#mishpat {
padding-top: 150px;
padding-left: 0px;
}
}
@media (max-width: 991px) {
#profile {
position: relative;
margin-top: 1%;
margin-left: 8%;
float: left;
bottom: 46px;
margin-bottom: -150px;
}
}
@media (max-width: 767px) {
#profile {
position: relative;
margin-top: 2%;
margin-left: -15%;
float: left;
bottom: 46.5px;
}
}
@media (max-width: 470px) {
#profile {
position: relative;
margin-top: 18%;
margin-left: -8%;
float: left;
max-width: 100%;
padding-top: 25%;
}
}
<header class="masthead text-center text-white d-flex">
<div class="layer">
</div>
<div class="container my-auto">
<div class="row">
<div id="mishpat" class="col-lg-10 mx-auto">
<h1 class="text-uppercase">
<strong>ד"ר מריאנה ירון</strong>
</h1>
<hr>
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5">מומחית ברפואה פנימית ואנדוקרינולוגיה</p>
</div>
<div class="col-lg-10 mx-auto">
<img id="profile" src="C:\Users\alonbarel336\source\repos\WebSite1\yaron 2\img\portfolio\thumbnails\3.jpg" class="img-responsive" width="520" height="700">
</div>
</div>
</div>
</header>
这是一张图片来展示它的样子:
如何在它穿过蓝线(流向下一行)之前停止?
答案 0 :(得分:0)
要使图像响应,请执行以下操作:
将img-responsive
替换为img-fluid
。 (Bootstrap 4中没有img-responsive
删除width="520" height="700"
。