当前位置:Gxlcms > html代码 > 图片在chrome,safari中都可以自动缩小,但在firefox,IE9中无法自动缩小_html/css_WEB-ITnose

图片在chrome,safari中都可以自动缩小,但在firefox,IE9中无法自动缩小_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:44人阅读

因为要在手机上能够访问,测试时就把浏览器的窗口缩到最小;
在safari中如图:



在firefox中就是:


图片和文字都没有完全显示出来;

html和css如下:
  1. <img class="img-responsive" width="250" src="https://www.gxlcms.com/img/sdlc.jpg" style="float:right;">


img-respinsive的样式:
  1. display:block;max-width:100%;height:auto

请问该如何解决呢


回复讨论(解决方案)

调整父容器宽度试下

调整父容器宽度试下


它的宽度好像是自动获取的,调了没用呢

或者试试html5,根据浏览器宽度不同,使用不同样式;不过要求浏览器,必须支持Html5;
类似于下面的响应式布局;

  1. <style type="text/css"> content div { border: 1px black solid; } @media screen and (max-width: 320px) { #below320 { background-color: red; } } @media screen and (min-width: 320px) and (max-width: 800px) { #between320to800 { background-color: red; } } @media screen and (min-width: 800px) and (max-width: 1280px) { #between800to1280 { background-color: red; } } @media screen and (min-width: 1280px) { #pass1280 { background-color: red; } }</style>

把 max-width:100% 改成 width: 100%

这些浏览器就不会在手机上用啊

去掉宽度就好了

把 max-width:100% 改成 width: 100%


嗯,这个试了试,不行;

这些浏览器就不会在手机上用啊


要考虑到这方面的,这不,今天为了测试,专门在手机上下了个firefox;

去掉宽度就好了

去掉宽度的话,图片就按它原大小显示了,也不缩小了;

或者试试html5,根据浏览器宽度不同,使用不同样式;不过要求浏览器,必须支持Html5;
类似于下面的响应式布局;

  1. <style type="text/css"> content div { border: 1px black solid; } @media screen and (max-width: 320px) { #below320 { background-color: red; } } @media screen and (min-width: 320px) and (max-width: 800px) { #between320to800 { background-color: red; } } @media screen and (min-width: 800px) and (max-width: 1280px) { #between800to1280 { background-color: red; } } @media screen and (min-width: 1280px) { #pass1280 { background-color: red; } }</style>


我不是专门做前端的,你说的不太懂哦,我再试试,实在不行,就换种布局和方式;


把 max-width:100% 改成 width: 100%


嗯,这个试了试,不行;



你去掉width="250" 了么?

你去掉width="250" 了么?


去掉了也不行;涉及width的,无论绝对还是相对,都试了试,不行;
难道和bootstrap也有关系,不过换了种方式;

这个应该是可以的。

如果不行,可能是受其他什么影响。

那我需要看更多代码了。

这个应该是可以的。

如果不行,可能是受其他什么影响。

那我需要看更多代码了。


可是在chrome,safari,opera和国产的浏览器中都没问题,就firefox和IE有问题;

人气教程排行