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 ...
随机推荐
- C#开发Unity游戏教程之游戏对象的行为逻辑方法
C#开发Unity游戏教程之游戏对象的行为逻辑方法 游戏对象的行为逻辑——方法 方法(method),读者在第1章新建脚本时就见过了,而且在第2章对脚本做整体上的介绍时也介绍过,那么上一章呢,尽管主要 ...
- android弹出对话框
我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等 ...
- 前端网页、php与mysql数据库字符编码(解决中文等乱码问题）
web开发中经常涉及前端网页——php——mysql之间的数据交互,当数据只有英文时通常不会有什么问题,但一旦涉及中文,三个地方的某一处字符编码不一致(如,网页使用的时gbk而mysql使用utf-8 ...
- POJ3070 Fibonacci[矩阵乘法]【学习笔记】
Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13677 Accepted: 9697 Descri ...
- bsgs算法详解
例题 poj 2417bsgs http://poj.org/problem?id=2417 这是一道bsgs题目,用bsgs算法,又称大小步(baby step giant step)算法,或者 ...
- BZOJ.3994.[SDOI2015]约数个数和(莫比乌斯反演)
题目链接 \(Description\) 求\[\sum_{i=1}^n\sum_{j=1}^md(ij)\] \(Solution\) 有结论:\[d(nm)=\sum_{i|d}\sum_{j|d ...
- Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) F. Souvenirs 线段树套set
F. Souvenirs 题目连接: http://codeforces.com/contest/765/problem/F Description Artsem is on vacation and ...
- JavaScript学习历程和心得体验
一.前言 在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证.浮动广告等,所以那时候JavaScript并没有受到重视.自从AJAX开始流行后,人们发现利用JavaScript可 ...
- 用css解决table文字溢出控制td显示字数(转)
场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...
- C# .Net 多进程同步 通信 共享内存 内存映射文件 Memory Mapped
节点通信存在两种模型:共享内存(Shared memory)和消息传递(Messages passing). 内存映射文件对于托管世界的开发人员来说似乎很陌生,但它确实已经是很远古的技术了,而且在操作 ...