码迷,mamicode.com
首页 > 其他好文 > 详细

响应式图片(基于宽度百分比的图像缩放)

时间:2018-06-19 14:49:02      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:png   oat   流式   添加   图像   res   ima   还需要   图片   

html的代码如下:

        <p class="text">我是段落</p>
	<div class="img-wrap">
		<img class="responsive" src="./images/y1.jpg">
		<p>图片描述</p>
	</div>    

然后有下面这样的css代码:

        p.text{
		float: left;
		width: 60%;
	}
	div.img-wrap{
		float: right;
		width: 40%;
	}    

现在的方式是流式布局,但是响应式的图像效果并没有出来,下面还出现了滚动条:

技术分享图片

为了让我们的图片变成响应式的,我们还需要添加如下的css代码:

        img.responsive{
		width: 100%;
		height: auto;
	}    

这样我们的效果就变成这样啦:

技术分享图片

 

响应式图片(基于宽度百分比的图像缩放)

标签:png   oat   流式   添加   图像   res   ima   还需要   图片   

原文地址:https://www.cnblogs.com/baby-lijun/p/9198394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!