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

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

WBOY
WBOYOriginal
2016-06-24 11:54:081145Durchsuche

因为要在手机上能够访问,测试时就把浏览器的窗口缩到最小;
在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有问题;
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn