在瀏覽器中調整為移動視圖大小時，圖像會覆蓋另一個div

Question

在瀏覽器中調整為移動視圖大小時，圖像尺寸和位置出現問題。

 .extension { display: table; padding: 50 px 0 px 50 px; width: 100 % ; height: auto; color: #fff; background-color: #558C89; background-size: cover; font-size: 22px; font-weight: 200; margin: 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } # extension img { width: 350 px; height: 275 px; position: absolute; } footer { padding: 50 px 0; height: auto; } 

 <section id="extension" class="extension"> <div class="container"> <div class="row"> <div class="col-12 col-sm-6 col-md-8"> <h1>Download Our Extension</h1> <p>extension </p> <a href="http://www.google.com/" class="btn btn-lg btn-dark" target="_blank">Download Extension</a> </div> <div class="col-6 col-md-4"> <img src="img/iMacricket.png"> </div> </div> <!-- /.row --> </div> <!-- /.container --> </section> <!-- Footer --> <footer id="contact"> <div class="container"> <div class="row"> <div class="span9"> <div class="title-page"> <h2 class="title">Get in Touch</h2> <hr class="small"> <h3 class="title-description">We are continually<br/> </h3> </div> </div> </div> <div class="row"> <div class="col-12 col-sm-6 col-md-8"> <form id="contact-form" class="contact-form" action="#"> <p class="contact-name"> <input id="contact_name" type="text" placeholder="Full Name" value="" name="name" /> </p> <p class="contact-email"> <input id="contact_email" type="text" placeholder="Email Address" value="" name="email" /> </p> <p class="contact-message"> <textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea> </p> <p class="contact-submit"> <a id="contact-submit" class="btn btn-lg btn-dark" href="#">Send Your Email</a> </p> </form> </div> <div class="col-6 col-md-4 text-center"> <h2>Contact Us</h2> <hr class="small"> <ul class="list-unstyled"> <li><i class="fa fa-envelope fa-fw"></i> <a href="mailto:name@example.com">test@gmail.com</a> </li> </ul> <br> <ul class="list-inline"> <li> <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a> </li> </ul> <hr class="small"> </div> </div> <br/> <p class="text-muted">Copyright &copy; 2017 - Designed &amp;</p> </div> <a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a> </footer> 

我試圖設置height:auto ，並調整圖像大小，但沒有成功。

Answer 1

您有圖像的特定寬度。 考慮將width屬性更改為max-width: 350px; 高度到max-height: 275px; 並將寬度和高度替換為100% ，這對於任何設備來說都是流暢的。

#extension img {
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 275px;
  position: absolute;
}

Answer 2

將img類添加到img屬性並添加此樣式

<div class="col-6 col-md-4">
    <div class="img">
      <img src="img/iMacricket.png">
    </div>
</div>

樣式

.img{
    width: 100%;
    height: 200px;
}
.img img{
    max-width: 100%;
    max-height: 100%;
}