CSS圖像調整大小響應

Question

我在html中列出了一個列表。 我正在嘗試以250x250px的尺寸顯示各種尺寸的專輯封面，並縮小比例以用於移動設備。 我的問題是，當我使用代碼時，圖像似乎沒有縮小並脫離它們所在的div。

 <ul id="gallery">
        <li>
        <a href="teethrev.html"><img src="../img/teethun.jpg" alt"">
        </a>
        <p>Teeth- Unremittance</p>
      </li>
        <li>
        <a href="teethrev.html"><img src="../img/teethun.jpg" alt"">
        </a>
        <p>Teeth- Unremittance</p>
      </li>
       <li>
        <a href="teethrev.html"><img src="../img/teethun.jpg" alt"">
        </a>
        <p>Teeth- Unremittance</p>
      </li>
         <li>
        <a href="teethrev.html"><img src="../img/teethun.jpg" alt"">
        </a>
        <p>Teeth- Unremittance</p>
      </li>
        <li>
        <a href="teethrev.html"><img src="../img/teethun.jpg" alt"">
        </a>
        <p>Teeth- Unremittance</p>
      </li>






     /*********************
     Gallery
  *********************/


#gallery {
 margin:0;
 padding:0;
list-style:none;
 }

 #gallery li {
float: left;
height: 250px;
width:250px;
margin: 2.5%;
 background-color:#171614;
  }

  #gallery li a p {
  margin: 10px;
  padding: 5%;
 font-size: 0.75em;
    }

有什么方法可以僅使用CSS在畫廊類型中顯示這些內容（我只知道css html），並使其具有響應性。 我使用了樹屋tut中的相同代碼，但是他們沒有使用div，所以我不了解它如何在我的系統上不起作用。 我也有一個全局img選擇器，最大寬度為100％，但我固定了寬度以將其縮小到250x250。

謝謝

Answer 1

在圖庫中嘗試：

margin: 0 auto 0 auto;
width: your width;
height: your height;
margin-top: XXpx;
margin-left: xxpx;

然后將代碼放入圖庫列表的內部。

告訴我們它是否有效，我使用類似的代碼，並且對我有效。

*您必須使用CSS樣式對圖片進行參數化。

Answer 2

這將有助於查看更多CSS，但這足夠了：

#gallery li img {
    max-width:100%;}

Answer 3

您必須添加此-

#gallery li a img{
margin: 10px;
width:250px;   //desired width
height:250px;   //desired heigth
}

還有許多其他方法，但是您也可以指定img樣式。

我希望這能幫到您...

Answer 4

我建議在移動設備上按比例縮小尺寸，例如：

 media only screen and (max-width: 420px) { #gallery img {width: 245px; } } 

您可以設置具有此圖像配置的屏幕尺寸，這對我有用

Answer 5

可能是這樣？

 * { box-sizing: border-box; } #gallery { margin:0; padding:0; list-style:none; } #gallery li { background-color:#171614; float: left; position: relative; width: 23%; padding-bottom: 23%; margin: 1%; } #gallery li a{ display: block; } #gallery li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #gallery li p { padding: 5%; font-size: 0.75em; color: #fff; width: 100%; position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.75); } @media only screen and (max-width: 800px){ #gallery li { width: 31%; padding-bottom: 31%; } } @media only screen and (max-width: 500px){ #gallery li { width: 48%; padding-bottom: 48%; } } @media only screen and (max-width: 360px){ #gallery li { width: 98%; padding-bottom: 98%; } } 

 <ul id="gallery"> <li> <a href="teeth.html"> <img src="http://s3-media4.fl.yelpcdn.com/bphoto/GJ5d_uEBpZUEOxjH390a8Q/ls.jpg" alt="" /> </a> <p>Teeth- Unremittance</p> </li> <li> <a href="teethrev.html"><img src="http://s3-media4.fl.yelpcdn.com/bphoto/GJ5d_uEBpZUEOxjH390a8Q/ls.jpg" alt="" /> </a> <p>Teeth- Unremittance</p> </li> <li> <a href="teethrev.html"><img src="http://s3-media4.fl.yelpcdn.com/bphoto/GJ5d_uEBpZUEOxjH390a8Q/ls.jpg" alt="" /> </a> <p>Teeth- Unremittance</p> </li> <li> <a href="teethrev.html"><img src="http://s3-media4.fl.yelpcdn.com/bphoto/GJ5d_uEBpZUEOxjH390a8Q/ls.jpg" alt="" /> </a> <p>Teeth- Unremittance</p> </li> <li> <a href="teethrev.html"><img src="http://s3-media4.fl.yelpcdn.com/bphoto/GJ5d_uEBpZUEOxjH390a8Q/ls.jpg" alt="" /> </a> <p>Teeth- Unremittance</p> </li> </ul> 

結束標簽ul - </ul>