<div class="box">

    <img src="01.jpg"/>

</div>

.box{

}

//只要给图片设置属性object-fit:cover 会自动截取盒子大小的图片，不会压缩

.box img{

  object-fit:cover;

}

css实现图片等比例缩放的更多相关文章

  1. css中图片等比例缩放

    li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }

  2. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

  3. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  4. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

  5. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  6. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  7. 让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. (转载)让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

随机推荐

  1. 在 IDEA中运行 WordCount

    一.新建一个maven项目 二.pom.xml 中内容 <?xml version="1.0" encoding="UTF-8"?> <pro ...

  2. 试用VS2019正式版

    1.下载地址https://visualstudio.microsoft.com/zh-hans/downloads/2.安装,安装过程比较简单,直接下一步,下一步即可,现在的网速一般下载+安装要2个 ...

  3. [Reinforcement Learning] Model-Free Control

    上篇总结了 Model-Free Predict 问题及方法,本文内容介绍 Model-Free Control 方法,即 "Optimise the value function of a ...

  4. request redirection

    # encoding:utf-8 import reimport jsonimport randomfrom esdapi.config import BASE_URLfrom requests.se ...

  5. git应用

    安装 Git for windows git config --global user.name "zhangyue" git config --global user.mail ...

  6. 错误: ‘shared_ptr’ in namespace ‘std’ does not name a type的解决方法。

    这是因为要使用C++11的标准编译,而catkin_make时无法识别出来. 修改方法是在CMakeLists.txt文件里面添加: set(CMAKE_CXX_FLAGS "${CMAKE ...

  7. Hyper-V安装虚拟机

    1.进入控制面板-程序,选择“启用或关闭Windows功能” 2.找到Hyper-V,勾选,重启电脑,即可 3.若是没有找到Hyper-V,如此操作 1)新建txt文件,输入以下内容: pushd & ...

  8. NPOI 读取excel的时候，时间格式的处理

    excel的时间格式是:CellType.Numeric 要判断时间还需要方法:DateUtil.IsCellDateFormatted(cell)的帮助: 示例代码如下: ICell cell = ...

  9. python3: 自动化测试框架pytest

    最近在学习web自动化,所以在这里总结一下pytest框架. 其实pytest 和 unittest 都是自动化测试框架,但是pytest更好用一些,有以下几个优点:1)可以根据标签执行用例:2)?? ...

  10. important覆盖行内样式

    优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...