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 ...
随机推荐
- code vs 1094 FBI树 2004年NOIP全国联赛普及组
题目描述 Description 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树[1],它的结点类型 ...
- Manthan, Codefest 18 (Div 1 + Div 2) (A~E)
目录 Codeforces 1037 A.Packets B.Reach Median C.Equalize D.Valid BFS E.Trips(正难则反) Codeforces 1037 比赛链 ...
- 【Codechef-Hard】Chef and Churu 分块
题目链接: https://www.codechef.com/problems/FNCS Solution 大力分块.. 对序列分块,维护块内前缀和.块的前缀和,修改时暴力维护两个前缀和,询问单点答案 ...
- oracle切割以，隔开的数字字符串
提前声明strsplit_typeCREATE OR REPLACE TYPE strsplit_type as table of varchar2(4000); 如果不,会报错:PLS-00201: ...
- 在Asp.net core返回PushStream
最近用asp.net core webapi实现了一个实时视频流的推送功能,在Asp.net中,这个是通过PushStreamContent来实现的. 基于对asp.net core的知识,随手写了一 ...
- Unity3D实践系列05,为GameObject添加额外属性
在Unity中,通常通过脚本为GameObject添加额外的属性.具体有2种方式:一种是通过硬编码为脚本字段赋值,另一种是通过反射在运行时给脚本字段赋值. 脚本通过字段硬编码为GameObject添加 ...
- Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.
Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏. Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.没有MS开发环境中的ShowI ...
- GPG入门教程
原文地址:http://www.ruanyifeng.com/blog/2013/07/gpg.html 作者: 阮一峰 日期: 2013年7月12日 前两篇文章,我介绍了RSA算法. 今天,就接着来 ...
- C#编程（五十三）----------字典Dictionary<TKey,TValue>
字典 关键字:Dicitionary 说明: 必须包含命名空间System.Collection.Generic Dictionary里面的每一个元素都是一个键值对(由两个元组组成:键和值). 键必须 ...
- 分布式系统：CAP
一致不太理解CAP,最近好像有点感觉了,这里写下来,先介绍下CAP的定义: C:一致性.写完数据后,立马能看到最新数据. A:可用性.所有请求必须有响应. P:分区容错性.网络或服务器故障不会导致系统 ...