如何使图片适合移动设备?

时间:2018-03-03 07:03:26

标签: html css twitter-bootstrap bootstrap-4

我正在为某人建立一个网站,不知怎的,我无法设法使标题中的图像停留在应有的位置。我使用@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>

这是一张图片来展示它的样子:

如何在它穿过蓝线(流向下一行)之前停止?

the new look after fixing with bootstrap 4

1 个答案:

答案 0 :(得分:0)

要使图像响应,请执行以下操作:

  1. img-responsive替换为img-fluid。 (Bootstrap 4中没有img-responsive

  2. 删除width="520" height="700"