如何使 img 填充移动网站的内部容器?

Question

我对开发网站很陌生，但是，使用下划线主题，我用 css 为我的公司制作了一个网站 - 它可以找到，但我无法使其适合移动设备。正如您在桌面视图上看到的那样，有两个内部容器，上面的图像非常适合：https://www.bailiwicklegal.com.au/homepage/

但是，在移动设备上查看时，两个容器中的这些图像都会被压缩，并且不会填满屏幕的宽度。这不仅发生在主页上，而且如果您单击登录页面上的两个容器中的任何一个，则后续页面上的其他图像也会发生这种情况。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

以上是我正在使用的视口

img {
height: auto;
/* Make sure images are scaled correctly. */
max-width: 100%;
/* Adhere to container width. */

}

以上是我的样式表上 img 的 css 一般 下面是内部容器的 css 和

.circle-container {
width:22%;
display:inline-block;
margin:0 15px 30px 15px;
text-align:center;
vertical-align:top;

}

以下是我对媒体查询的 css

@media only screen and (max-device-width: 991px) {
.internal-container {max-width:100%;padding:0 20px;}
.internal-container 
.circle-container {display:block; width:100%; margin: 0 auto;}
.internal-container h1 {max-width:100%;}
body.single-post 
.internal-container img {display:block; max-width:100%; height:auto; max-height:100%;}
.narrow-width {max-width:100%;}
header .secondary, header .col-50 {display:none;}
header .col-25 {max-width:100%;padding:0 0 0 20px;}
.logo img {max-width: 100% ; display:block;}
h1.intro {font-size:25px;}
h1.intro, .intro-statement {width:100%;padding:0 20px;}
.circle-container {display:block;margin:0;}
.circle-container h2 {display:block; text-align:center;padding:0;margin: 20px 0;}
.home-circle, .home-circle:before  {max-width:100%; max-height: 100%; vertical-align: middle}
.home-circle:hover span {display:block;}
.intro-statement {font-size:16px;}
.intro-statement h3 {font-size:24px;}
footer .col-50 {width:100%;padding:20px;}
.news-container span {float:left;}
.news-container .col-50 {line-height:2;padding:10px 20px;}
.news-container h3 {width:100%;}
.col-people img {display:block;float:none;margin:0 20px;}
.col-news {width:100%;}
footer .doyles {float:none;margin:0;display:block;}
.footer-nav {text-align:center !important;}
.copyright 
.bk-overlay {display:none;}
.copyright 
.col-50 {float:none;margin:0;display:block;}
.footer-links {display:none;}
.contact-text {float:none;margin:0;display:block;}
	}}

如果您能帮助我完成移动网站的最后润色，那将意义重大！谢谢

Answer 1

首先，删除circle-container的内联样式。然后像这样改变circle-container的风格

.circle-container{
width: 25%;
display: inline-block;
margin: 0 15px 30px 15px;
text-align: center;
vertical-align: top;
position:unset !important
}

然后像这样更改视口。

@media only screen and (max-device-width: 768px)
@media only screen and (max-device-width: 991px){
.circle-container{
width:50%;
margin:0 auto;
}
}

最后，为较小的屏幕添加额外的代码

@media only screen and (max-device-width: 410px){
.circle-container{
width:100% !important;
}
}

这绝对不是一个好方法，但它现在会起作用。尝试更改代码以使其响应更快:)(