CSS-图片不变形设置
不管网页做的美还是丑，有一个问题始终是无法躲避的，就是有的时候会遇到图片变形的问题，之前遇到过这种问题解决过，不过还是整体的重新研究了一下图片，其中主要涉及到的知识点就是max-width和max-height的使用，原始图片为750*626：
其中图片设置图片变形的是只有第二张，这一张图片固定设置了图片的宽高，第一张图片图片是根据图片的虽然固定了宽高，但是比例和原始图片一致，所以看不出来变形，剩余的图片的基本上就是设置其中max-height和固定width，这样出现的效果没有变形，如果单纯的设置max-width，高度会根据图片图片比例变高。
如果想要图片不变形就是设置max-height或者max-width中的一个，另外固定width或者height中的一个，具体代码如何，有兴趣的可以自行测试:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>博客园-FlyElephant</title>
<style type="text/css">
div {
float: left;
} .test1 img {
width: 187.5px;
height: 156.5px;
} .test2 img {
width: 300px;
height: 100px;
} .test3 img {
max-width: 300px;
max-height: 100px;
} .test4 img {
max-width: 100%;
height: 200px;
} .test5 {
width: 300px;
height: 200px;
} .test5 img {
max-width: 100%;
max-height: 100%;
} .test6 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
} .test6 img {
max-width: 300px;
max-height: 100px;
} .test7 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
} .test7 img {
max-width: 300px;
}
</style>
</head> <body>
<div class="test1">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test2">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test3">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test4">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test5">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test6">
<img src="../../public/images/rv_mobile.jpg" />
</div>
<div class="test7">
<img src="../../public/images/rv_mobile.jpg" />
</div>
</body> </html>
CSS-图片不变形设置的更多相关文章
- css 设置头像图片不变形
css 设置头像图片不变形 在样式中加 object-fit: cover 就可以了
- CSS背景图片常见属性设置
在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称); //默认在父级元素内的左上角 2)背景平铺方式:ba ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- css图片叠加和底部定位
css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...
- CSS图片列表
1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...
- CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
- Css中的变形及过渡动画
在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
随机推荐
- Atcoder Contest069F:Flag
题目:https://arc069.contest.atcoder.jp/tasks/arc069_d 题意就是让你在n对数字每一对都选一个数使得任意两个数做差的绝对值最小值最大. 关系显然是一个2- ...
- BZOJ.1396.识别子串(后缀自动机/后缀数组 线段树)
题目链接 SAM:能成为识别子串的只有那些|right|=1的节点代表的串. 设这个节点对应原串的右端点为r[i],则如果|right[i]|=1,即\(s[\ [r_i-len_i+1,r_i-le ...
- 如果想使用GIT Extentions的解决冲突窗口，安装时必须勾选KDIFF3
因为第一次安装时,没有选择同时安装KDIFF3,所以遇到冲突时,点击合并,始终无法弹出合并窗口. 还有一个问题,就是在安装时,要选择OpenSSH,不要选择PuTTY.
- LPC18xx/43xx OTP Controller driver
LPC18xx/43xx OTP Controller driver /* * @brief LPC18xx/43xx OTP Controller driver * * @note * Copyri ...
- dotNetSpider 手记
准备工作: 从github上download工程. 安装VS2017. 安装 .net core 2.0. 编译通过. 基础架构: 调度器 Scheduler 从根site开始,向 Downloade ...
- mmc生产任务分配问题续
mmc生产任务分配问题续,本题目比上个题目难, 要注意的是,生产,销售,库存的关系, 生产+上月库存-销售=本月库存, 期初,生产=库存,销售没有.
- MySQL客户端输出窗口显示中文乱码问题解决办法
最近发现,在MySQL的dos客户端输出窗口中查询表中的数据时,表中的中文数据都显示成乱码,如下图所示:
- Delphi实例分析：远程传输数据和文件
在Windows操作系统的平台上,WinSock是首选的网络编程接口,用于在网络上传输数据和交换信息,它构成了Windows操作系统进行网络编程的基础.对于编写网络应用程序来说,WinSock是一门非 ...
- lufylegend:图片的加载和显示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <script ...
- JPA & Hibernate 注解
1 . @Entity(name="EntityName") 必须 ,name 为可选 , 对应数据库中一的个表 2 . @Table(name="",cata ...