鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩

首页 > 鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩

鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

您可以通过使用 object-position 属性来切换被替换元素（如：<video><embed><img>以及在某些情况下的<option><br></br> <audio><canvas><object><applet>）的内容对象在元素框内的对齐方式。</p> <p>object-fit 属性由下列的值中的单独一个关键字来指定。<br></br> contain<br></br> 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。<br></br> cover<br></br> 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。<br></br> fill<br></br> 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。<br></br> none<br></br> 被替换的内容将保持其原有的尺寸。<br></br> scale-down<br></br> 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 </p> <p><strong>fill | contain | cover | none | scale-down</strong></p> <p><strong>demo:</strong></p> <pre><code class="language-html"><div><h2>object-fit: fill</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/><h2>object-fit: contain</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/><h2>object-fit: cover</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/><h2>object-fit: none</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/><h2>object-fit: scale-down</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/></div> <style> h2 {font-family: Courier New, monospace;font-size: 1em;margin: 1em 0 0.3em; }div {display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;height: 940px; }img {width: 150px;height: 100px;border: 1px solid #000; }.narrow {width: 100px;height: 150px;margin-top: 10px; }.fill {object-fit: fill; }.contain {object-fit: contain; }.cover {object-fit: cover; }.none {object-fit: none; }.scale-down {object-fit: scale-down; } </style></code></pre> <p><img referrerpolicy="no-referrer" alt="" height="891" src="https://img-blog.csdnimg.cn/20200313005038175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODYwNjM0,size_16,color_FFFFFF,t_70" width="1020"></img></p> <p>【扩展阅读】其他与图像相关的CSS属性: object-position, image-orientation, image-rendering, image-resolution。</p> </div> </div> </div> <div class="col-sm-10 col-sm-offset-1" style="margin-top: 1px;"> <div class="listBlocks content_box"> <h3>更多相关：</h3> <ul class="arcListWrap"> <li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/8iv57x60zg/" target="_blank">【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不�</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>  <template><div class="sg-scan" :up="isToUp"><van-button icon="scan" type="info" @click="scan" round /></div> </template> <script> // i... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/9r7j38hzgv/" target="_blank">g-git 相关命令及其基本原理探索(二)：git 在工作中的常用命令操作，超级实用！！！</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>文章目录1. 分离头指针2. 通过HEAD 来进行不同提交的差异对比3. 删除不需要的分支4. 对当前分支最近一次提交的message 做变更5. 基于当前分支，修改老旧的commit信息6. 把连续多个commit 整合为一个commit7. 合并多个不连续的commit信息8. 比较暂存区和 HEAD 最新内容的差异9. 比较... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/giaq4e6ftd/" target="_blank">XPath与多线程爬虫</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>一. Xpath的介绍与配置 1. XPath是什么 XPath是一门语言 XPath可以在XML文档中查找信息 XPath支持HTML XPath通过元素和属性进行导航总结： XPath可以用来提取信息（和正则表达式类似） XPath比正则表达式更加厉害 XPath比正则表达式更加的简单如果你之前... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/st0viaq7u3/" target="_blank">dedecms部分文章出现读取附加信息出错的解决办法</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>问题：估计是新版本开发的时候，没有考虑旧版，文章内容为空的新闻，新版不在允许文章内容为空的新闻，这样旧版的内容为空的新闻升级后将无法再编辑。解决：你可以对如下文件进行如下修改：article_edit.php (这个文件在后台文件夹里面 ) 35行（具体的搜：“ 读取附加信息出错 ” 就知道是哪里了） /*5.3版本注... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/4c5sdi7o8f/" target="_blank">python归一化代码_python中的快速图像归一化</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>我觉得你的时间安排得很慢。也许你的安装出了问题？在我试过这个测试程序：#!/usr/bin/python3import sysimport numpy as npimport cv2from PIL import Imagefrom profilehooks import profile@profiledef try_numpy(im... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/3coxy8jsig/" target="_blank">Udacity机器人软件工程师课程笔记（三）-样本搜索和找回-基于漫游者号模拟器-使用moviepy输出测试视频</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>6.方法测试在这个部分我们要整体的测试我们的程序，对前面的知识和内容有一个整体的应用和概括。这是Udacity提供的相应资料，在code文件夹中有一个Rover_Project_Test_Notebook.ipynb文件，提供了输出视频的笔记本文件。由于个人喜好的原因，我选择了pycharm2019来运行此程序。（1）... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/rj41tqw93i/" target="_blank">原生CSS设置预加载图片之前的默认背景图</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>/*默认加载图片*/ .class-name { /*背景图片*/background: url(../../img/banner/banner-default.jpg) no-repeat center bottom;width: 100%;height: 861px; } .class-name:after { /*默认加载背景图... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/427lvif3rc/" target="_blank">OpenCV 学习笔记03 boundingRect、minAreaRect、minEnclosingCircle、boxPoints、int0、circle、rectangle函数的用法...</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>函数中的代码是部分代码，详细代码在最后 1 cv2.boundingRect 作用：矩形边框（boundingRect），用于计算图像一系列点的外部矩形边界。 cv2.boundingRect(array) -> retval 参数： array - 灰度图像（gray-scale image）或 2D点集（ 2D point s... </p> </div> </div> </li><li> <div class="arcTitle clearfix"> <h3><a href="//11gx.com/zfrl6ucphs/" target="_blank">目标检测之Faster-RCNN的pytorch代码详解(数据预处理篇)</a></h3> </div> <div class="clearfix"> <div class="arcDes"> <p>首先贴上代码原作者的github:https://github.com/chenyuntc/simple-faster-rcnn-pytorch（非代码作者，博文只解释代码）今天看完了simple-faster-rcnn-pytorch-master代码的最后一个train.py文件，是时候认真的总结一下了，我打算一共总结四篇博客用... </p> </div> </div> </li> </ul> </div> </div> </div>  </div> </section> <div class="footer-wrapper"> <div class="footer"> <p class="text-center"> ©2024 11GX.COM </p> </div> </div></body> </html>