vue 图片自适应排列插件_css实现图片自适应容器的几种方式

css实现图片自适应容器

经常有这样一个场景，需要让图片自适应容器的大小。

1、img标签的方式

我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。

.div1 {

width:500px;

height:400px;

border:1px solid black;

}

.div1 img {

/*

width: 100%;

height:100%;

*/

}

这是正常的佩琪(如果图片比容器大的话，图片会超出容器)

.div1 {

width:500px;

height:400px;

border:1px solid black;

}

.div1 img {

width: 100%;

height:100%;

}