猿问

怎样用css控制图片自适应大小?

怎样用css控制图片自适应大小?


炎炎设计
浏览 353回答 3
3回答

慕侠2389804

123456img{  width:auto;  height:auto;  max-width:100%;  max-height:100%;}这样可以使图片自适应容器的大小,但前提是图片所在的容器自身有一定的尺寸 

慕勒3428872

用CSS是无法很好的控制图片自适应的,因为通常页面放大缩小只是横向的变化,而高度是不变或者相对不变的,而图片想自适应必须设定一个百分比的宽度和高度,当只有横向变化的时候,图片当然可以自动的变化自适应,但相应的图片也会变形,如果无关紧要的话可以这么弄,但如果图片是展示性的图片时变形就会很难受,绝对不能这么做!不过可以用js控制

胡说叔叔

要控制图片的大小,必须得先知道这张图片是以什么形式展现的:1.<img>导入2.background-image.就只有这2种方法,即使是用JS或者其他语言来控制,也是万变不离其宗,这两种方法就是本质。对于第一种(<img>),控制大小可以通过外框设置宽度,然后img用100%来适应外框(这样子,图片会根据width来自动调整图片,如果长、宽都设死了,那么图片一般都会出现变形),当然纵向也是同理可以执行的。第二种的话(background-image);可以通过:background-size来自适应大小。样式有4个属性:length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。测试percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。测试cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。测试contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
随时随地看视频慕课网APP

相关分类

Html5
我要回答