搜索
您的当前位置:首页正文

img大小和background-size

来源:小奈知识网

img

不设置img标签的width和height,将显示图片真实大小
只设置width或height,另一个将按比例自动缩放
设置了width和height,将按设置的大小来显示

img图片自适应(bootstrap响应式图像的写法)
img{
display:block;
max-width:100%;
height:auto;
}
把元素的 display 属性设置为 block,以块级元素显示,因为img是行内元素设置不了width和height
设置 height:auto,相关元素的高度取决于浏览器
auto是默认的值,一般无需设置此值,不设置即宽度默认为auto(自适应 自动),随内容增加而增宽,随浏览器宽度而换行,
一般情况下,如果是自动宽度是没有必要设置的,直接去掉简单而又节约代码,同时和设置值为auto一样效果
width设置的是内容块级元素内容的宽度,假设父级元素是body则width:100%后块级元素就和父级元素一样宽(当然还要考虑默认的margin),设置margin-left后会出现横向滚动条,不设置width或者width:auto,则不会有滚动条

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度
百分比是以父元素为标准的,所以首先其父元素要有宽高,宽度一般不设置会有默认值(auto),但是高度不设置就没有默认值,因此如果父元素没设高度值,而其内部元素用了百分比作为高度时,是没有效果的

如果设置了div的宽高,而里面的img不设置,若img过大,会超出div

里面img设置width:100%,则img宽度和div一样,但img特性是自动等比缩放

margin的百分比也是以父元素为基准的

background-size

background-size: length(px)|percentage(%)|cover|contain;
cover会按原长宽比缩放背景图来铺满整个元素,超出的会被裁掉

contain也是按原长宽比缩放背景图,会显示完整的图片

转载于:https://www.cnblogs.com/Grani/p/9784803.html

因篇幅问题不能全部显示,请点此查看更多更全内容

Top