html - media query中如何只占图片的全部空间和居中焦点

Question

我这里有图像代码，我想占据所有剩余的空白区域。我的图像大小是 259x170，我有一个大显示器。仅当我将 chrome 调整为更小时，空间才会消失。而且，在媒体查询中，我只想将 3 图像聚焦在中心，我的代码可以正常工作，但是当我在手机上查看它时有一个空白区域。

桌面

移动 View

.photo ul{
	list-style: none;
	margin: 0 -3px 0 -40px;
	display: inline-flex;
}

.photo ul li{
	margin-right: 2px;
}

.photo ul li img{
	width: 100%;
}

@media screen and (max-width: 700px){
  .photo ul{
        margin: 0 -3px 0 -39.5%;
        width: 167%;
    }

    .photo ul li{
        margin-right: 0;
    }
}

@media only screen and (max-width: 450px){
    .photo ul{
        margin-left: -42.5%;
    }
}

@media only screen and (max-width: 390px){
    .photo ul{
        margin-left: -44.8%;
    }
}

<div class="photo" align="center">
		<ul>
			<li><img src="common/img/img2.png"></li>
			<li><img src="common/img/img3.png"></li>
			<li><img src="common/img/img4.png"></li>
			<li><img src="common/img/img5.png"></li>
			<li><img src="common/img/img6.png"></li>
		</ul>
	</div>

Answer 1

据我所知，由于您的父 div 没有宽度，因此子 div 无法根据需要使用，因此请同时为父 div 和子 div 提供宽度，请考虑为解决方案建议的 css

建议的解决方案CSS

.photo ul{
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style: none;
   display: inline-flex;
}

.photo ul li{
    margin-right: 2px;
    float: left;
    width: 20%;
}

.photo ul li img{
    width: 100%;
}