Question

我创建了这个page。我正在尝试使用最大宽度为480的设备显示100％的图片。我将width图片设置为100%和height它是auto但是图像不能填充父div。请咨询

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />


    <title></title>

    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->

    <link href="bootstrap_Cerulean.min.css" rel="stylesheet" />
 <link href="style.css" rel="stylesheet" />
 <link href="responsive.css" rel="stylesheet" />
</head>



<body  dir="rtl">

<div class="row image-box style2">
                        <div class="col-md-6">
                            <article class="box">
                                <figure class="animated fadeInLeft" data-animation-type="fadeInLeft" data-animation-duration="1" style="animation-duration: 1s; visibility: visible;">
                                    <a href="#" title=""><img src="http://placehold.it/270x192" alt=""></a>
                                </figure>
                                <div class="details">
                                    <h4>Hire Cars</h4>
                                    <p>Nunc cursus libero purus ac congue ar lorem cursus ut sed vitae pulvinar massa idend porta nequetiam elerisque mi id.</p>
                                    <a href="#" title="" class="button">SEE ALL</a>
                                </div>
                            </article>
                        </div>
                        <div class="col-md-6">
                            <article class="box">
                                <figure class="animated fadeInLeft" data-animation-type="fadeInLeft" data-animation-duration="1" data-animation-delay="0.4" style="animation-duration: 1s; animation-delay: 0.4s; visibility: visible;">
                                    <a href="#" title=""><img src="http://placehold.it/270x192" alt=""></a>
                                </figure>
                                <div class="details">
                                    <h4>Cruise Deals</h4>
                                    <p>Nunc cursus libero purus ac congue ar lorem cursus ut sed vitae pulvinar massa idend porta nequetiam elerisque mi id.</p>
                                    <a href="#" title="" class="button">SEE ALL</a>
                                </div>
                            </article>
                        </div>
                        <div class="col-md-6">
                            <article class="box">
                                <figure class="animated fadeInLeft" data-animation-type="fadeInLeft" data-animation-duration="1" style="animation-duration: 1s; visibility: visible;">
                                    <a href="#" title=""><img src="http://placehold.it/270x192" alt=""></a>
                                </figure>
                                <div class="details">
                                    <h4>Things To Do</h4>
                                    <p>Nunc cursus libero purus ac congue ar lorem cursus ut sed vitae pulvinar massa idend porta nequetiam elerisque mi id.</p>
                                    <a href="#" title="" class="button">SEE ALL</a>
                                </div>
                            </article>
                        </div>
                        <div class="col-md-6">
                            <article class="box">
                                <figure class="animated" data-animation-type="fadeInLeft" data-animation-duration="1" data-animation-delay="0.4">
                                    <a href="#" title=""><img src="http://placehold.it/270x192" alt=""></a>
                                </figure>
                                <div class="details">
                                    <h4>Fly in Comfort</h4>
                                    <p>Nunc cursus libero purus ac congue ar lorem cursus ut sed vitae pulvinar massa idend porta nequetiam elerisque mi id.</p>
                                    <a href="#" title="" class="button">SEE ALL</a>
                                </div>
                            </article>
                        </div>
                    </div>
    <script src="jquery.js"></script>
    <script src="bootstrap.min.js"></script>
</body>
</html>

Answer 1

将其添加到HTML页面的head（非常重要，修复媒体查询）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你引用页面的CSS中，我注意到这种风格会导致你出现问题：

.image-box.style2 figure {
    float: left;
    width: 250px;
}

要执行您想要的操作并覆盖该样式，请添加以下CSS：

@media (max-width: 480px) {
    .image-box.style2 figure {
        float: none;
        width: auto;
    }

    .row.image-box > div {
        padding-left: 0;
    }
}

这样，当屏幕宽度低于480px时，图像不会被强制向左浮动，也不会被限制在250px。此外，当屏幕很小时，屏幕左侧不会有15px的间隙。

如何在最大宽度为480的设备中使用图像填充div？

1 个答案: