Question

所以我有一个问题。我的标题div会根据页面宽度而变化。但是，div中的图像将向左浮动或相互堆叠。如何制作它以便它们自动调整大小并保持在页面中心？

`<body>
    <div class="nav">
        <ul>
            <li id="active-text"><a class="active" href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">All Products</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Sign Up</a></li>
            <li id="logo"><a href="#">logo</a></li>
        </ul>
    </div>
    <div id="title">
        <p></p>
    </div>
    <div class="products">
        <a href=''><img src='http://g04.a.alicdn.com/kf/HTB1snhcKVXXXXXZXpXXq6xXFXXXN/WB1363-font-b-Korean-b-font-font-b-Style-b-font-font-b-Fashion-b-font.jpg' alt='' width='200px' height='320px'></a>
        <a href=''><img src='http://g03.a.alicdn.com/kf/HTB1pkBKIXXXXXaGXFXXq6xXFXXXZ/2015-prefall-autumn-winter-middle-age-Fashion-font-b-mature-b-font-font-b-lady-b.jpg' alt='' width='200px' height='320px'></a>
        <a href=''><img src='http://image.rakuten.co.jp/mountain-hop/cabinet/04035967/04654733/da1512-0005-01.jpg' alt='' width='200px' height='320px'></a>
        <a href=''><img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS9iiobsGOL-7tKsLqf4luH-W4yaoEBnx1yFxEkE1FNJHoAL2YL' alt='' width='200px' height='320px'></a>
    </div>
        <div class="footer">
            <p>Copyright &copy; <?= date('Y'); ?> Chongqibao Inc. All rights reserved.</p>
        </div>
    </body>
</html>`


    html {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    background: url(coffee.jpg) no-repeat center center fixed;
    background-size: cover;
}


.box {
    border: 1px red dashed;
}

#title {
    margin: auto;
    margin-top: 20px;
    width: 50%;
    text-align: center;
    color: #efefef;
    font-size: 1.6em;
    border: 7px solid #efefef;
}

.nav {
    display: inline-block;
    width: 100%;
    background-color: #333;
    padding: 0;
    height: 58px;

}

#logo {
    float:right;
}

#logo a:hover {
    background-color: #333;
}

.nav ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    list-style-type: none;
}

.active {
    background-color: white;
}

#active-text a {
    color: black;
}

.nav ul li {
    float: left;
    display: inline;
}

.nav ul li a {
    display: block;
    padding: 14px 16px;
    line-height: 30px;
    text-decoration: none;

    color: white;
}

.nav ul li a:hover:not(.active) {
    background-color: black;
}

.products {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.products img {
    display:inline-block;
    margin:5px 20px;
    padding:5;
    max-width: 100%;
}

Answer 1

我会使用响应式CSS。它允许您设置@media (max-width: 500px) {}或@media (min-width: 500px) {}并将样式元素的CSS放在内部的屏幕尺寸中。

这允许您根据放在响应式@media标记内的内容更改元素的特定属性或所有属性。

以下是W3Schools网页：http://www.w3schools.com/css/css_rwd_intro.asp

希望这有帮助！

Answer 2

我想补充泰勒的答案，除非你有

，否则它不适用于较小的屏幕尺寸

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

在你的HTML代码的头部。这将允许您的css中的@media代码实际适应其他大小。

此网站还可以帮助您确定@media代码中的正确宽度。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

而不是做一些像素计算：

使用视口单元：vw, vh, vmin, vmax超过px, pt, ...

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

即。 50vw将始终为设备视口宽度的50％。

如何使我的图像和div响应屏幕大小

3 个答案: