[css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子

最新推荐文章于 2022-10-08 15:10:20 发布
最新推荐文章于 2022-10-08 15:10:20 发布
阅读量1.2k 收藏 2
点赞数 29
分类专栏： # 前端面试题css目录汇总
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/113807626
版权

[css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子



    图片等比缩放 img{ object-fit: cover/contain;}

    div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

【CSS实现图片等比例缩小不变形】
魔术师
09-30 5724
【CSS实现图片等比例缩小不变形】 CSS实现图片等比例缩小不变形 .wrap { width: 90%; height: 550px; border: 1px solid #000;
css固定图片大小 vue_css3 实现图片等比例放大与缩小
weixin_34246971的博客
12-29 4322
css3 实现图片等比例放大与缩小在工作中，经常会碰到图片缩放的情况，比如服务器端返回的图片大小，可能大小不同，有的大，有的小，服务器端返回的图片大小我们不能控制的，但是在我们设计稿的时候，可能会规定每张图片的大小为固定的宽度和高度，比如200px*200px这样的。我们这边使用的是背景图片来做的，但是如果直接使用 img标签这样引入图片貌似不行，因此我们目前只能使用背景图片来做。对于大一点的图片...
CSS实现图片等比例缩小不变形的实例代码
09-22
主要介绍了CSS实现图片等比例缩小不变形，通过实例代码给大家介绍了css控制图片大小不变形的相关知识，需要的朋友参考下吧
css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中
热门推荐
闭月羞花猫
02-22 2万+
2011.02.22 于新城科技园。 实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。 随着css3的普及，现在介绍一种单纯通过css来进行控制。 具体代码如下： css3 图片等比缩放，居中显示 .mysec{     width:400px;     height:200px;     border
截取固定大小图片css,css-使不同大小的图片在固定大小的容器中居中
weixin_32093689的博客
08-04 854
HTML示例如下：方法一：.imgbox{position: relative;width: 240px;height: 240px;}.imgbox img{position: absolute;top:;bottom:;left:;right:;margin: auto;max-width: 100%;max-height: 100%;outline: 1px solid #000;}说明：i...
html5图片固定,html5根据图片固定大小，使大小不等的图片居中显示 用于列表中显示的图片的统一处理...
weixin_35407400的博客
06-04 488
/** 根据固定宽高的盒子，让图片自由居中显示的方法* 盒子长200px，宽145px*/// $(".imgNeedChange")为通过jq获取到的图片数组,对单个图片进行处理时去掉for循环即可function imgDispose() {for(var i = 0; i < $(".imgNeedChange").length; i++) {document.getElementsB...
CSS解决图片缩小不变形
weixin_34357962的博客
05-27 121
我会在图片上加: <img style="max-width:80px;max-height:80px;"> 限制其最大宽度和高度 转载于:https://www.cnblogs.com/wang715100018066/p/6913722.html
css实现图片等比例缩小不变形
Inuyasha1121的专栏
09-23 7281
当图片未知大小时，为了使图片在一个规定大小的div中全部显示，可以对图片使用max-width和max-height，这样图片就会按照对大的宽或高等比例缩放图片，图片相对不变形清晰。
纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)
09-25
在网页设计中，确保图片等比缩放且不超出设定的容器尺寸是非常常见的需求。这里我们探讨的是如何使用纯CSS来实现这一目标，特别是在不支持CSS表达式（IE6不支持）的情况下，仍然能兼容IE7及以上的浏览器。 首先，...
CSS解决图片缩小不变形实例
u013239233的博客
01-24 2930
>  html>  head>  meta charset="utf-8" />  title>图片缩小不变形实例 www.divcss5.comtitle>  style>  .divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}  .divcss5 img{max-width:300p
图片缩小变形 css,CSS解决图片缩小不变形
weixin_31093677的博客
08-04 355
看看C&num; 6&period;0中那些语法糖都干了些什么(中篇)接着上篇继续扯,其实语法糖也不是什么坏事,第一个就是吃不吃随你,第二个就是最好要知道这些糖在底层都做了些什么,不过有一点 叫眼见为实,这样才能安心的使用,一口气上五楼,不费劲. 一:字符串嵌入值 我想 ...Leetcode Maximum Product SubarrayFind the contiguous ...
CSS如何实现图片等比例缩放不变形
Ronaldouy的博客
10-08 2万+
CSS如何实现图片等比例缩放不变形
CSS如何实现图片等比例缩放不变形（代码实例）
web前端入门基础进阶教程-htmlcssjs
06-22 7100
在工作中经常需要对图片进行缩放，但有些缩放会让图片变形，所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形，**正在学习CSS的小伙伴赶紧过来看看吧！ 下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ，具体代码如下所示： > <img src="../images/bg1.jpg"alt=""/> > > img { > > /*等宽缩小不变形*/ > > /*width: 10
css实现一个图片自适应，图片不会变形。
gongsixing1998的博客
07-03 7448
css实现一个图片自适应，就是图片跟随父盒子放大缩小，图片不会变形
不同尺寸图片的按照规定尺寸统一不变形展示
qin_yulinling的博客
03-20 1365
1、类比微信朋友圈图片展示效果，不同宽高的图片均以规定的正方形尺寸不变形展示，可适当截取部分（宽高自动截取） html: <div> <img src=""> </div> css: div{ width: 100px; height: 100px; } img{ width: 100%; height: 100%...
CSS-图片显示固定大小不压缩、不变形
weixin_43937466的博客
04-19 1万+
需求说明： 实现让长方形图片显示出正方形且不变形的效果的效果，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。 原图↓： 背景图↓： 一、背景图 首先，我们来看一下通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。 简单介绍一下background-size： background-size: contain;...
html中怎么固定一张图片大小,固定大小的div，不固定大小的图片如何放入div?
weixin_39950081的博客
06-03 2660
1 . css代码.imgBox{background-image: url(./shengdan.png); //图片路径 可写在标签的style当中background-repeat: no-repeat;width: 120px;height: 120px;overflow: hidden;background-position: left top;border: 1px solid #00...
css控制图片不变形,图片自动适应
zhuyu19911016520
01-03 9095
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
Div里CSS控制图片按比例扩大缩小不变形
ljw_Josie的博客
07-24 1万+
一般来说，我们设定一定宽度高度的div标签，在里面放上图片，只有当图片大小尺寸符合这个宽度和高度的时候显示最佳。那有的时候不同的界面，同样的信息（比如头像）放大的尺寸是不一样，怎么才能让图片根据DIV的宽高度进行，缩放呢？其实很简单，只用设置其css样式即可。     .photo img                  {         max-width:80px;//这是DIV的大
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值