网站开发需要配置哪些人员,品牌网站建设預定大蝌蚪,百度站长资源,游戏开发培训学校需求#xff1a;经常会有一个div盒子#xff0c;里面放入一个img图片。需要是图片保持比例#xff0c;缩放充满div盒子。 思路#xff1a; 1.必须给父元素设置固定的宽高。2.给img设置 object-fit: scale-down; 属性 object-fit使用学习 先看效果#xff1a; !DOCTYP… 需求经常会有一个div盒子里面放入一个img图片。需要是图片保持比例缩放充满div盒子。 思路 1.必须给父元素设置固定的宽高。2.给img设置 object-fit: scale-down; 属性 object-fit使用学习 先看效果 !DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1title菜鸟教程(runoob.com)/titlestyle.img_box {display: inline-block;border: 5px solid cyan;width: 200px;height: 300px;margin: 20px;}h4 {float: left;}.fill {object-fit: fill;}.contain {object-fit: contain;}.cover {object-fit: cover;}.scale-down {object-fit: scale-down;}.none {object-fit: none;}/style
/headbodyh1object-fit 属性/h1img src../../static/bgcimg.jpeg altParish4不使用 object-fit:/h4brp stylemargin-top:30px;注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit 属性。/pdiv classimg_boximg classfill src../../static/bgcimg.jpeg altParis stylewidth:200px;height:300pxh4object-fit: fill (默认):默认不保证保持原有的比例内容拉伸填充整个内容容器/h4/divdiv classimg_boximg classcontain src../../static/bgcimg.jpeg altParis stylewidth:200px;height:300pxh4object-fit: contain:保持原有尺寸比例。内容被缩放。/h4/divdiv classimg_boximg classcover src../../static/bgcimg.jpeg altParis stylewidth:200px;height:300pxh4object-fit: cover:保持原有尺寸比例。但部分内容可能被剪切。/h4/divdiv classimg_boximg classscale-down src../../static/bgcimg.jpeg altParis stylewidth:200px;height:300pxh4object-fit: scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同取决于它们两个之间谁得到的对象尺寸会更小一些。/h4/divdiv classimg_boximg classnone src../../static/bgcimg.jpeg altParis stylewidth:200px;height:300pxh4object-fit: none:保留原有元素内容的长度和宽度也就是说内容不会被重置。/h4/div/body/html
