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

Posted baby-lijun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式图片(基于宽度百分比的图像缩放)相关的知识,希望对你有一定的参考价值。

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;
	}    

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

技术分享图片

 

以上是关于响应式图片(基于宽度百分比的图像缩放)的主要内容,如果未能解决你的问题,请参考以下文章

React Native - 响应式图像宽度(百分比?)

第九十五节,移动流体布局和响应式布局总结

8 响应式设计

延迟加载“响应式”图像(未知高度)

响应式网页设计和调整图像大小

没有预定义宽度的响应式砌体布局