css - 如何让 img 填充移动网站的内部容器？

Question

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

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

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

上面是我正在使用的视口(viewport)

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
}

然后像这样更改视口(viewport)。

@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;
    }
}

这绝对不是一个好办法，但暂时可以。尝试更改您的代码以使其更具响应性:))