css - 手机端响应式布局时,图片设置width=100%后,还有设置display:block才能实现自适应?
迷茫
迷茫 2017-04-17 13:57:06
0
5
832

求解

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>移动端</title>
    <style>
        img {display: block; max-width: 100%;
}
    </style>
</head>
<body>
    
<img src="img/tour1.jpg" alt="">

</body>
</html>

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

모든 응답(5)
刘奇

img标签是行内元素,行内元素是没有width和height属性,自然无法设置。需要设置成block,才可以设置。但是img标签比较特殊,跟input又叫替换元素,自身就有width和height,所有只是为了设置width和height,改变display为block是没有必要的。画蛇添足而已

Peter_Zhu

因为img标签默认是行内元素(好像是这么说的),也就是inline,行内元素设置宽度是无效的,display: block; 之后为块级元素。设置了width才有效

迷茫

为何不用flex布局呢?

大家讲道理

不需要啊,直接width=100%,就可以呀,前提要有 移动端的 meta 标签

Peter_Zhu

解决图片常见问题---底部多余留白

设置img为:

display:block;

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!