div宽度和高度固定，让图片铺满整个div而且不变形

oliverhuang 发布于2019-08-02 15:58 / 1917人阅读

摘要：样式嗯嗯，是不是感觉超简单那，看完之后我也这么感觉的，之前的做法是把图片从标签引入，宽度和高度设置成，很明显图片会变形，后来从网上搜了好多方法试了都解决不了，最后请教了同事，原来这么简单，搜嘎。。下面是前后对比图

css样式：
.photo .img{

background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}

嗯嗯，是不是感觉超简单那，看完之后我也这么感觉的，之前的做法是把图片从img标签引入，宽度和高度设置成100%，很明显图片会变形，后来从网上搜了好多方法试了都解决不了，最后请教了同事，原来这么简单，搜嘎。。下面是前后对比图

GPU云服务器云服务器 div宽度 div的高度 div宽度获取 DIV固定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54447.html

div宽度和高度固定，让图片铺满整个div而且不变形

摘要：样式嗯嗯，是不是感觉超简单那，看完之后我也这么感觉的，之前的做法是把图片从标签引入，宽度和高度设置成，很明显图片会变形，后来从网上搜了好多方法试了都解决不了，最后请教了同事，原来这么简单，搜嘎。。下面是前后对比图 css样式：.photo .img{ background-position: center; background-size: cover; backgr...

Object 2019-08-29 13:56 评论0 收藏0
CSS入门

CSS介绍 CSS：层叠样式表：Cascading Style Sheets：修改HTML样式 CSS引用 DOCTYPE html> 引用CSS p { color: red; } 引用样式 CSS选择器 DOCTYPE html> ...

番茄西红柿 2019-04-23 13:32 评论0 收藏0
CSS学习笔记(八) 页面布局之三栏-固定宽度布局

摘要：示例添加这一行规则结果就会变成这样我们把这种现象称为浮动滑移，可以使用三种方法来预防发生从设定的元素宽度中减去添加的水平外边距边框和内边距的宽度和。当我们取消勾选该属性时，栏就会由于栏的推挤产生了浮动滑移，移位到栏下方。 1.布局前的认知 1.1 三种基本方案多栏布局有三种基本的实现方案：固定宽度、流动、弹性。固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 ...

eechen 2019-08-28 18:03 评论0 收藏0
浅谈web自适应

摘要：本篇文章分享了一些处理多屏幕自适应的经验，希望有益于各位。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被的伸缩性布局方式替代，变得越来越弹性十足。转自：http://www.cnblogs.com/consta... 前言随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和...

kid143 2019-08-02 15:57 评论0 收藏0
浅谈web自适应

摘要：本篇文章分享了一些处理多屏幕自适应的经验，希望有益于各位。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被的伸缩性布局方式替代，变得越来越弹性十足。转自：http://www.cnblogs.com/consta... 前言随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和...

dack 2019-08-21 11:56 评论0 收藏0