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 ...
随机推荐
- flask run方法和run_simple
1.Flask提供的Web服务器不适合在生产环境中使用 2.run方法启动flask集成的服务器: 例: if __name__ == '__main__': app.run(debug=True) ...
- php版本CKEditor 4和CKFinder安装及配置
下载并解压CKEditor 4和CKFinder CKEditor 4下载地址:https://ckeditor.com/cke4/builder,选择自定义的版本,记得加上中文语言包 CKFinde ...
- BZOJ.4832.[Lydsy1704月赛]抵制克苏恩(期望DP)
题目链接 \(f[s][i][j][k]\)表示还剩\(s\)次攻击,分别有\(i,j,k\)个血量为\(1,2,3\)的奴隶主时,期望受到伤害. 因为期望是倒推,所以这么表示从后往前求,注意\(a, ...
- AE开发中关于 “无法嵌入互操作类型.........请改用适用的接口”问题的解决方法
最近开始使用VS2010,在引用COM组件的时候,出现了“无法嵌入互操作类型……,请改用适用的接口”的错误提示. 查阅资料,找到解决方案,记录如下: 选中项目中引入的dll,鼠标右键,选择属性,把“嵌 ...
- CSS高速制作图片轮播的焦点
来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...
- poj1321 棋盘问题（深搜dfs）
转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:id=1321">http://poj.org/prob ...
- Revit API判断是不是柱族模板
OwnerFamily即族模板.获取类别的方法:Document.Settings.Categories.get_Item(BuiltInCategory.OST_Columns); //判断是不是柱 ...
- UICollectionView 相关
当数据不多,collectionView.contentSize小于collectionView.frame.size的时候,UICollectionView是不会滚动的 self.Cov.alway ...
- 查看webservice服务下的所有方法和参数类型
方法:直接在IE浏览器中输入webservice的地址,查看返回的XML数据即可. 效果如下:
- 【pycharm】pycharm上安装tensorflow，报错：AttributeError: module 'pip' has no attribute 'main' 解决方法
pycharm上安装tensorflow,报错:AttributeError: module 'pip' has no attribute 'main' 解决方法 解决方法: 在pycharm的安装目 ...