在浏览器中调整移动视图大小时，图像会覆盖另一个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%;
}