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>

css图像调整大小响应

5 个答案: