如何讓我的圖像和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響應屏幕尺寸

回答

相關問題