图像没有在手机上全宽

-1

我在我的网页中使用引导，当我在小屏幕上查看我的网页，例如iPhone7时，它中的图像变得非常小，我试着使用@media，但它不起作用，有人可以告诉我，我在这里失踪是我对CSS和HTML图像没有在手机上全宽

<img src="example" style="width: 40%; margin: 0 auto" class="img-responsive img-center" alt="Responsive image"> 

@media (max-width: 768px) { 
      .img-responsive { 
       width: 100%; 
      } 
     }

来源

2017-06-04 Ahmed Elgabaly

删除inline css'width：40％;'from'img' tag –

我之所以把它设置为40％是因为我希望它不会在大屏幕上占满全部宽度，所以还有另一种方式？ –

你可以创建另一个类，而不是使用内联css –

尽你所能，避免联样式代码。您需要.img-responsive类的默认宽度，以及媒体查询以100％宽度定位较小的屏幕。

https://codepen.io/anon/pen/awzvVB

<img src="example" class="img-responsive img-center" alt="Responsive image"> 

.img-center { 
    margin: 0 auto; 
} 
.img-responsive { 
    width: 40%; 
} 

@media only screen and (max-width: 768px) { 
    .img-responsive { 
    width: 100%; 
    } 
}

顺便说一句，就需要将图像设置为以便与margin: 0 auto使其居中块元素（display: block）。

来源

2017-06-05 03:19:15

非常感谢很多人，这个工作，现在我明白了不同屏幕的自定义缩放工作原理 –

@Suresh Maurya，谢谢你解释它太 –

不针对img-responsive类。添加另一个类或ID，并在最后应用带有!impoprtant的css。

来源

2017-06-05 06:54:00

图像没有在手机上全宽

回答

相关问题