css实现图片自适应缩放的两种方法

最新推荐文章于 2024-05-15 09:36:56 发布
最新推荐文章于 2024-05-15 09:36:56 发布
阅读量7.6k 收藏 9
点赞数 4
分类专栏： 前端笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35582562/article/details/118439334
版权

想要实现图片根据给定宽高来自适应缩放的时候，会想到什么属性？是object-fit: cover;吗？
来试一试！为了展示效果，我特地选了对称的图片。下面两个img元素都有一个div包裹，div设置固定宽高，第一个img标签宽高均100%，第二个img标签宽高均最小100%：

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <meta name="referrer" content="never">
    <style type="text/css">
    	*{margin: 0;padding: 0;border: none;overflow: hidden;}
        .img1,.img {
            width: 600px;
            height: 320px;
            margin: auto;
        }
        .img1 img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .4s
        }
        .img1 img:hover{width: 125%;height: 125%;margin-left: -12.5%;margin-top: -12.5%;transform: rotate(-12deg);}

        .img{position: relative;overflow: hidden;;}
        .img img{
            position: relative;
            top: 50%;
            le
最低0.47元/天 解锁文章
柴钰琪
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
实现图片的宽高比自适应
weixin_54362381的博客
08-27 814
实现图片的宽高比自适应 1、【这种写法最标准】需要把height设为0、overflow设为hidden，然后通过padding-bottom来设置百分比就可以了。 overflow hidden width 100% height 0 老师的处理方式是，给容器设置高度为0，然后设置padding-bttom撑开高度。因为padding-bottom设置百分比是相对盒子的宽度计算的。例如在宽度为768px的设备下，padding-bottom的值就是768px乘以31.25%。375px的宽度下，就是375
CSS实现图片放大缩小的几种方法
qq_44792224的博客
01-17 2913
常用使用img标签，制定width或者height的任意一个，图片会自动等比例缩小。但是不知道为什么我在uniapp小程序中这样写并没有等比缩小。使用CSS3新属性，transform的scale。
css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应
最新发布
2401_84715691的博客
05-15 558
这种图片比容器小的情况强行将图片自适应的话图片就失真。但经常会遇到接口获取的不规则图片的情况，一般这种时候会将小于容器的话将其水平、垂直居中。属性就能进一步优化图片的宽高都小于容器的情况了。max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。这是正常的佩琪（如果图片比容器大的话，图片会超出容器）
img或background-image实现图片高度根据宽度改变而改变
qq_43651168的博客
06-20 3551
img或background-image实现图片高度根据宽度改变而改变。图片的高度根据宽度进行自适应。
Pytorch机器学习（六）——YOLOV5中的自适应图片缩放letterbox
热门推荐
lzzzzzzm的博客
09-02 2万+
Pytorch机器学习（六）——YOLOV5中的自适应图片缩放 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 YOLOV5中相比于之前的版本，有很多小trick，导致其性能和应用比较好。本文先讲讲在将图片输入网络前，对图片进行预处理的letterbox的自适应图片缩放技术 一、letterbox自适应图片缩放技术 在目标检测中，输入的图片尺寸有大有小，根据前人的实验结果，输入网络的尺寸统一缩放到同一个
css做个hover的时候，缩放的效果
m0_68094390的博客
05-23 784
要实现在元素的hover状态下缩放的效果，可以使用CSS的transform属性。transform属性可以改变元素的位置、大小和形状等，并可以与过渡（transition）效果一起使用，以实现更加平滑的过渡效果。需要注意的是，transform效果的显示效果会因不同浏览器而有所差异，某些早期版本的浏览器也无法正确地显示这一效果，因此在具体实现时需要考虑浏览器的兼容性。以上示例中，当鼠标悬停在选择器所选元素上时，它会以0.3秒的时间逐渐以1.2倍的比例进行缩放，实现了更加顺滑自然的效果。
css实现一个图片自适应，图片不会变形。
gongsixing1998的博客
07-03 7197
css实现一个图片自适应，就是图片跟随父盒子放大缩小，图片不会变形
CSS实现菜单背景自适应宽度的方法
09-24
总之，这个例子展示了如何通过CSS的背景属性、定位和内边距来实现菜单背景自适应宽度的效果，这种方法在没有CSS3的`background-size`属性支持的浏览器中仍然有效。对于现代浏览器，可以使用`background-size: cover`...
移动Web中图片自适应的两种JavaScript解决方法
10-24
本文主要探讨了两种使用JavaScript实现图片自适应的方法，分别针对图集和单篇文章的情况。 首先，我们来看图集类型的图片自适应。在图集场景下，理想的情况是图片能完全适应手机屏幕，用户只需左右滑动即可浏览，...
纯css3使用vw和vh实现自适应的方法
09-24
总结来说，纯CSS3利用vw和vh单位实现自适应布局是一种高效、简洁的方法，尤其适合于追求性能和简洁性的项目。通过理解视口单位的工作原理，开发者可以更好地控制网页元素在不同设备上的表现，提升用户体验。
HTML中使背景图片自适应浏览器大小实例详解
08-30
下面将详细介绍一种常见的实现方法及其原理。 首先，我们要明白问题的核心是让背景图片根据浏览器窗口的大小自动调整，保持其比例，同时不会被裁剪或拉伸。一种常见解决方案是使用CSS3的`background-size`属性配合`...
autoIMG 基于jquery的图片自适应插件代码
10-28
它有两种工作模式： 1. **支持CSS2.1 `max-width` 属性的浏览器**：如果浏览器支持 `max-width` 属性，`autoIMG` 直接将图片的 `maxWidth` 设置为容器的宽度，这样图片在加载完成后会自动按照最大宽度缩放，不会...
CSS篇——伸缩布局
weixin_45273807的博客
08-03 402
伸缩布局的基本概念 伸缩容器：某个标签添加了"display:flex"属性，他就是伸缩容器。 伸缩项：伸缩容器的子元素为伸缩项 主轴：伸缩容器从左到右的方向称为主轴 侧轴：从上到下称为侧轴 主轴的对齐方式 在伸缩布局中, 默认情况下水平方向是主轴, 默认情况下主轴的起点在伸缩容器的最左边, 默认情况下所有的伸缩项都是从主轴的起点开始排版的，但是我们也可以通过属性来修改主轴的起点的位置。 fle...
基于CSS的前端图片自适应等比缩放
第一段代码的博客
11-03 5957
前端处理过图片的同学,当图片出现像素大小不一,高宽不确定的时候,很多时候,需要根据容易大小完成图片的自适应等比缩放效果,不然会出现图片变形或者图片被裁剪的不友好渲染. 解决方法: 1.治标.要想治标的话,就需要在上传照片的时候对图片限制或者等比提前处理,这样后续前端取出来的话,就可以非常开心的渲染了,因为图片提前已经根据我们的需要后端处理好了. 但是,上述情况,很多时候不适用,更多时候,需要我们后续前端拿图片的时候,实现图片的自适应,(因为用户很多时候的图片很难达到要求) 2.终极解决方法:前端CS
【uniapp 图片展示自适应，等比例缩放】
qq_39236283的博客
11-11 1万+
uniapp 图片等比缩放
html如何拉伸一个图片,css怎么拉伸图片？
weixin_39726697的博客
06-04 678
css可以使用background-size属性设置图片拉伸，background-size属性规定背景图像的尺寸。此属性可以使用数值、百分比、cover等设置图片拉伸。background-size属性规定背景图像的尺寸。background-size属性介绍：语法：background-size: length|percentage|cover|contain;属性值：值描述length设置背...
CSS开发技巧(三)：图片点击缩放
u012443286的博客
10-13 6017
前言  利用CSS实现图片的点击缩放是一个很值得研究的效果。在某些业务需求场景中，我们可能并没有足够的空间展示过大的图片，这就需要限制图片容器的宽度和高度。然而图片限制了宽度，一些图片的细节便又无法看清。  实现这种需求的一种直观方式是固定图片宽高，然后提供点击缩放的功能。这是本文要讨论的要点。  需要额外说明的是，CSS实现业务需求的方式是灵活的，这与开发者的功底也是密切相关的，实现上述的业务需...
CSS中如何实现图片的缩放效果
weixin_34415923的博客
06-12 273
转载于:https://www.cnblogs.com/jinlonghu/p/9171828.html
CSS实现图片缩放
SinceSora的博客
10-21 3250
图片缩放需要用到两个属性 transition和transform transition 属性是一个简写属性，用于设置四个过渡属性： transition-property 用于设置图片的缩放方向 默认为all 即等比例缩放 可以指定width或者height transition-duration 规定缩放所需要的时间 默认0 通常设置为1s transition-timing-function...
<a style="background: orangered;-webkit-animation: twinkling 1s infinite ease-in-out;" href="{% url "df_user:person_message" %}?username={{ person.cusername }}"> <img src="{{ MEDIA_URL }}{{ img.ulogo }}" style="width: 50px;height:50px;border-radius: 50%;overflow: hidden;object-fit: cover;" alt=""> <span style="color: darkgreen">{{ img.uname }}</span>
06-08
这是一个HTML模板代码，其中包含一个链接标签<a>，这个链接会根据Django的URL配置文件（urls.py）中名为'df_user:person_message'的URL模式，生成一个指向个人信息页面的URL。此外，这个链接还包含一个查询字符串参数'username'，值为Django模板中的变量'person.cusername'。在这个链接中，还包含一个图片标签<img>和一个文本标签<span>，用于显示用户头像和用户名。其中，图片的URL由Django的配置文件中的'MEDIA_URL'和图片对象的'ulogo'属性拼接而成，用户名则是通过图片对象的'uname'属性获取的。此外，这个链接还定义了一个CSS样式，使得链接的背景色为橙色，并且动态闪烁。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值