首页 >web前端 >html教程 >图片在chrome,safari中都可以自动缩小,但在firefox,IE9中无法自动缩小_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:54:081141浏览

因为要在手机上能够访问,测试时就把浏览器的窗口缩到最小;
在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" >


img-respinsive的样式:
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%


嗯,这个试了试,不行;

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


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

去掉宽度就好了

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

或者试试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" 了么?

你去掉width="250" 了么?


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

这个应该是可以的。

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

那我需要看更多代码了。

这个应该是可以的。

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

那我需要看更多代码了。


可是在chrome,safari,opera和国产的浏览器中都没问题,就firefox和IE有问题;
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn