Maison >interface Web >tutoriel HTML >图片在chrome,safari中都可以自动缩小,但在firefox,IE9中无法自动缩小_html/css_WEB-ITnose
因为要在手机上能够访问,测试时就把浏览器的窗口缩到最小;
在safari中如图:
在firefox中就是:
图片和文字都没有完全显示出来;
html和css如下:
<img class="img-responsive" style="max-width:90%" src="img/sdlc.jpg" style="float:right;" alt="图片在chrome,safari中都可以自动缩小,但在firefox,IE9中无法自动缩小_html/css_WEB-ITnose" >
display:block;max-width:100%;height:auto
调整父容器宽度试下
调整父容器宽度试下
或者试试html5,根据浏览器宽度不同,使用不同样式;不过要求浏览器,必须支持Html5;
类似于下面的响应式布局;
<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%
这些浏览器就不会在手机上用啊
去掉宽度就好了
去掉宽度的话,图片就按它原大小显示了,也不缩小了;
或者试试html5,根据浏览器宽度不同,使用不同样式;不过要求浏览器,必须支持Html5;
类似于下面的响应式布局;
<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" 了么?
这个应该是可以的。
如果不行,可能是受其他什么影响。
那我需要看更多代码了。
这个应该是可以的。
如果不行,可能是受其他什么影响。
那我需要看更多代码了。