如何让我的图像和div响应屏幕尺寸

所以我有一个问题。我的标题div会根据页面的宽度发生变化。但是，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%; 
}

来源

2016-08-02 buttonSmasher96

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

这使您可以根据您在响应@media标记中放入的内容更改元素的特定属性或所有属性。

这里是它的网页W3Schools的：http://www.w3schools.com/css/css_rwd_intro.asp

希望这有助于！

来源

2016-08-02 23:00:30 Taylor

我想除非你有一个

<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/

来源

2016-08-02 23:05:26 Kevin

，而不是做一些像素计算：

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

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

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

来源

2016-08-02 23:37:33 dognose

它仍然没有工作。我想我试图做出反应的是我的“产品”div包含所有的图像。我正在使用safari。一旦我开始水平延伸窗口，所有图像被推到左边，而我的“标题”div实际上调整自己。 – buttonSmasher96

如何让我的图像和div响应屏幕尺寸

回答

相关问题