css图片最长边自适应_冰-G的博客-程序员宅基地_css 图片最长边

技术标签: css  前端  html  

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .prev-box {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      overflow: hidden;
    }
    /* 保证最大边占满盒子 */
    .prev-box .prev-img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit:cover;
    }
  </style>
</head>

<body>
  <div class="prev-box">
    <!-- 宽比高长的图 -->
    <img class="prev-img" src="http://www.desktopwallpaperhd.net/wallpapers/10/d/dongwushijie-animal-tupian-107405.jpg">
  </div>
  <div class="prev-box">
    <!-- 高比宽长的图 -->
    <img class="prev-img" src="https://images.unsplash.com/photo-1612998137328-15874448d686?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" />
  </div>
</body>
</html>

对长边进行截取

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_48956666/article/details/121701579

智能推荐

mysql cmake_MySQL编译安装 之 cmake_馒头夹个把子肉的博客-程序员宅基地

MySQL版本5.5以上编译安装时需要用到软件cmake,cmake特性是独立于源码编译,编译工作可以在另外一个目录中而非源码目录中进行,好处是可以保证源码目录不受任何一次编译的影响。1.下载安装cmake[[email protected] ~]# wget http://www.cmake.org/files/v2.8/cmake-2.8.11.2.tar.gz[[email protected] ~]# t...

Idea中上传项目到Github_讓丄帝愛伱的博客-程序员宅基地

文章目录方法一方法二方法一选择Import into Version Control &gt; share project on github2. 将本地项目上传到Github上3. 填写相关的信息4. 选择上传的文件5. 仓库创建成功后,会提示仓库创建成功6. GitHub下,多了一个项目仓库方法二首先在github上创建一个远程仓库打开Idea控制台(Terminal)输入Git命令git initgit add .git commit -m 'fir

系统思考负反馈之戴明的PDCA循环_weixin_34356555的博客-程序员宅基地

系统思考负反馈之戴明的PDCA循环内容提要:戴明的PDCA循环是一个负反馈模型,通过制定目标计划,执行计划,检查反馈执行结果,然后通过结果和目标计划作比较得到偏差,通过修正偏差来指导新的执行,不断循环,最终是结果和目标一致。PDCA循环是系统思考的负反馈模型。PDCA循环又名戴明环,由美国质量管理专家戴...

小米面试题 嵌入式_【小米嵌入式面试】小米嵌入试软件开发一面。-看准网_weixin_39828956的博客-程序员宅基地

已经不是面试官迟到的问题了,是约好了面试时间,结果彻底没有然后了,这种言而无信我头一回见。小米运营部门令人困惑的工作作风,简单总结一句就是:敷衍不走心,面试规则内部都不统一。两次面小米,一次迟到一个半小时,一次面试官玩消失,约定的时间彻底没打来电话,令人咂舌。具体如下:10月,小米运营岗一面,业务部门面试官提前加了微信,但是面试迟到一个半小时。发微信询问,面试官致歉说开会,然后找了个会议室,用手机...

HDU2025 查找最大元素[入门]_李浅唱的博客-程序员宅基地

//用指针解决 using namespace std;#include &amp;amp;lt;iostream&amp;amp;gt;int main (){ char s[100+1],max,*t; while(cin&amp;amp;gt;&amp;amp;gt;s){ max='\0'; //每次初始化max //search for max t=s; while(*t){ if(*t&amp;amp;gt;max)...

DP刷题表_EPSILONCXL的博客-程序员宅基地

写在前面这篇博客主要是记录本人DP的刷题记录的。主要以luogu(以下简称Lg)和HDU为主。时不时更新一下。基础篇Lg P1091 合唱队形正反两边DP求最长上升子序列(注意答案-1)Lg P1140 相似基因DP状态方程式都比较好想出来Lg P1508 Likecloud-吃、吃、吃和走迷宫差不多HDU2041 超级楼梯经典模型进阶篇Lg P1387 最大正方形思维难...

随便推点

vue打包axios请求报404_vue使用axios请求本地json文件出现404_weixin_39611769的博客-程序员宅基地

前端学HTTP之连接管理前面的话 HTTP连接是HTTP报文传输的关键通道.要掌握HTTP就需要理解HTTP连接的来龙去脉以及如何使用这些连接 如果想查看一个网页,浏览器收到URL时,会执行下图所示的步骤.将服务器的IP地址 ...软件开发常用设计模式—单例模式总结(c&amp;plus;&amp;plus;版)单例模式:就是只有一个实例. singleton pattern单例模式:确保某一个类...

Linux的BSD格式什么意思,BSD 文件扩展名: 它是什么以及如何打开它?_小野的乐趣生活的博客-程序员宅基地

BSD 文件疑难解答 打开 BSD 文件的问题Microsoft Notepad 未安装尝试打开 BSD 时,你会遇到一条错误消息,例如 “%%os%% 无法打开 BSD 文件”。 通常情况下,这意味着 Microsoft Notepad 没有安装在 %%os%% 上。 这将防止你双击打开 BSD 文件,因为操作系统不知道如何处理它。 提示:单击 “显示应用程序” 并找到应用程序,可以选择另一个 ...

论文阅读笔记 | 分类网络——ParNet_Clichong的博客-程序员宅基地

如有错误,恳请指出。文章目录1. Introduction2. Related Work2.1 Analyzing importance of depth2.2 Scaling DNNs3. ParNet Method3.1 ParNet Block3.2 Downsampling and fusion block3.3 Network Architecture3.4 Scaling ParNet3.5 Practical Advantages or Parallel Architecures4. R.

html中属性的作用,html的标签中 unselectable=on 属性的作用_weixin_39931362的博客-程序员宅基地

在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件。加上该属性的元素不能被选中。&lt; !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt; html&gt;&lt; head&gt;&lt; title&gt;html的标签unselecta...

JAVA高级学习笔记-多线程_我可能是盖氏英雄的博客-程序员宅基地

多线程:程序(Program):是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码,静态对象。进程(process):是程序的一次执行过程,或是正在运行的一个程序。是一个动态的过程:有它自身的产生、存在和消亡的过程。--程序是静态的,进程是动态的--进程作为资源分配的单位,系统在运行时会为每个进程分配不同的内存区域线程(thread):进程可以进一步细化为线程,是一个程序内部的一条执行路径。--若一个进程同一时间并行执行多个线程,就是支持多线程的--线程作为调度

Gartner 2022年重要战略技术趋势_Tech_Observer的博客-程序员宅基地

每年Gartner都会发布对业务至关重要的技术趋势。今年Gartner的重要战略技术趋势包含 12 项,这些趋势将使 CEO 能够实现业务增长、提高数字化进程和效率的目标,并将CIO和IT高管视为组织中的战略合作伙伴。Gartner研究副总裁 David Groombridge 表示:“首席执行官们知道他们必须推进加快数字业务的发展,并正在寻求更直接的数字化途径来与客户建立联系。但考虑到未来的经济风险,他们也希望提高企业效率,保护利润和现金流。(有关这些趋势的战略价值,请参见下文。)Gartner 预计

推荐文章

热门文章

相关标签