html - 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)在画廊类型中显示这些内容，并且让它们也具有响应性。我使用了来自 treehouse tut 的相同代码，但他们没有使用 div，所以我不明白它为什么不能在我的上工作。我还有一个最大宽度为 100% 的全局 img 选择器，但我固定了宽度以将它们缩小到 250x250。

谢谢

Answer 1

在图库中尝试:

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

然后放上gallery list里面的代码。

告诉我们它是否有效，我使用类似的代码并且对我有效。

*你必须用css样式参数化你的图片。