[响应式]两种图片等比缩放写法

最新推荐文章于 2024-06-05 17:35:31 发布
最新推荐文章于 2024-06-05 17:35:31 发布
阅读量1k 收藏 1
点赞数
分类专栏： WEB前端开发 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxipro/article/details/84098334
版权

写法一：

<div class="pic"><a href=""><img src="images/pic-product1.jpg" alt=""></a></div>

样式： 

 .pic{padding-bottom:34px;}

 .pic,.pic a,.pic img{width: 100%;height: 100%;padding-bottom:34px;}


写法二：
 

<div class="item"><a href="" style="background-image:url(images/pic-banner1.jpg)"></a></div>  


样式：

.item a{display: block;padding-top:46.71%;
background-repeat: no-repeat;background-position: center;background-size: cover;}

 

雨中来客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片压缩、图片等比缩放软件
11-21
图片压缩、图片等比缩放软件图片压缩、图片等比缩放软件
CSS3的background-size属性，实现响应式式图片等比例缩放。
01-23
CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一，它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小，而不仅仅是局限于图片...
图片自适应浏览器窗口宽度——就是响应式图片等比缩放效果
weixin_34234721的博客
05-13 595
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;图片宽度自适应&lt;/title&gt;    &lt;style type="text/css"&gt;        img{
怎么等比例缩小图片尺寸？这四种方法肯定可以帮到你！
最新发布
ZCR20000的博客
06-05 660
如今，我们已经意识到，在许多情况下，可能需要调整图片的尺寸，以适应不同的需求。它的使用简便，速度快，而且还是很便捷的。针对这些问题，按比例缩小图片尺寸成为了一个不错的解决方案，这种做法不仅能解决存储空间不足的问题，还能带来其他一系列好处，首先，缩小图片尺寸会减小文件大小，节省存储空间的同时也降低了传输和加载的时间，提升了用户体验，其次，小尺寸的图片消耗的带宽更少，这对于网络连接较慢或流量有限的情况下尤为重要，最后，小尺寸的图片更适合进行编辑和处理，因为它们的导入和导出速度更快，使得工作流程更加高效。
php背景图片满屏,CSS实现响应式全屏背景图
weixin_36132766的博客
03-11 777
当前很流行的一种网页形式就是满屏大图，本文将用最简单的方式实现该效果。用到了CSS 属性background-size,无需javascript。核心概念使用background-size 属性，填充整个viewport当css属性background-size 值为cover时，浏览器会自动按比例缩放背景图的宽和高，直到大于或等于viewport的宽和高使用媒体查询为移动设备提供更小尺寸的背景图...
响应式开发: 宽高等比例缩放
weixin_34218890的博客
04-15 139
响应式开发: 宽高等比例缩放<style> .box {width: 20%;height:0;padding-bottom:20%;background-color:red;}</style><div class="box"> hello world</div>原理:这里涉及到百分比布局的问题;百分比布局中，元素的宽高是继承自父级元素...
轮播图el-carousel内，图片的响应式等比缩放
公z号：职场爱学习
06-23 2659
做轮播图的时候，图片不设置宽高，那么，会导致只能显示一部分图片，或者图片被压扁了。所以，需要设置宽度和高度。 el-carousel的高度默认是300px，如果里面的图片超出这个高度，就只能显示一部分。因此，需要修改el-carousel的高度。 ...
图片等比缩放函数
张海涛的专栏
03-24 1341
//==================================================================== /* *等比缩放函数（以保存的方式实现） *@param string $picname 被缩放的处理图片源 *@param int $maxx 缩放后图片的最大宽度 *@param int $maxy 缩放后图片的最大高度 *@param string $
c#图片缩放图片剪切功能实现(等比缩放)
09-04
本文将详细介绍如何在C#中实现等比缩放和图片剪切的功能，同时分享基础的图片处理知识。 首先，我们要知道等比缩放是保持图像比例进行大小调整的关键。在处理图像时，我们通常希望保持原始图像的比例，以免造成图像...
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
10-28
在实际网页开发中，图片的显示效果和加载速度对于用户体验至关重要，因此掌握这两种技术是十分必要的。 首先，文章中定义了一个名为`yQuery`的函数，它模拟了jQuery库的结构。`yQuery.fn`是`yQuery.prototype`的...
PHP实现图片的等比缩放和Logo水印功能示例
10-19
在这个示例中，我们将使用GD库来实现图片的等比缩放和Logo水印功能。 1. **等比缩放**： 等比缩放的关键在于保持图片的比例不变，防止拉伸或压缩。这里使用`getimageSize()`函数获取图片的宽度 `$w` 和高度 `$h`，...
VS2015 C++ MFC 等比缩小图片分辨率大小
08-20
VS2015 C++ MFC 等比缩小图片分辨率大小 bool CtestCImageDlg::CreateSmallPic(CString& szOldFileName, CString& szNewFilName) { const double WIDTH = 5000; const double HEIGHT = 5000; CImage oldimg; CImage newimg; oldimg.Load(szOldFileName); if (oldimg.IsNull()) return false; int nWidth = 160; int nHeight = 160; nWidth = oldimg.GetWidth(); nHeight = oldimg.GetHeight(); if (nWidth > WIDTH || nHeight > HEIGHT) { double dRatio = nWidth * 1.0 / nHeight; if (nWidth > nHeight) { nWidth = WIDTH; nHeight = nWidth / dRatio; } else { nHeight = HEIGHT; nWidth = nHeight * dRatio; } } if (!newimg.CreateEx(nWidth, nHeight, 24, BI_RGB)) { oldimg.Destroy(); return false; } int nPreMode = ::SetStretchBltMode(newimg.GetDC(), HALFTONE); newimg.ReleaseDC(); oldimg.Draw(newimg.GetDC(), 0, 0, nWidth, nHeight, 0, 0, oldimg.GetWidth(), oldimg.GetHeight()); newimg.ReleaseDC(); ::SetBrushOrgEx(newimg.GetDC(), 0, 0, NULL); newimg.ReleaseDC(); ::SetStretchBltMode(newimg.GetDC(), nPreMode); newimg.ReleaseDC(); newimg.Save(szNewFilName); newimg.Destroy(); oldimg.Destroy(); return true; }
响应性图片等比例缩放
weixin_43988544的博客
12-12 401
看到的一篇比较详细的文章 链接: link.
css 图片等比例缩小_CSS从零开始——进阶样式（5）
weixin_39931923的博客
11-22 928
今天这一章节主要是响应式布局需要补充的部分，以及通过 CSS 进行元素的2D、3D转换。1 响应式布局响应式布局，其实就是同一个页面会针对不同设备的浏览器大小，改变为不同的布局结构，使得页面可以适应不同的环境，以最佳的布局显示页面内容。前面的几个章节，其实已经零散的把响应式布局必需的几个关键点都提到了，包括：弹性盒子、网格布局、媒体查询，而且在样例当中也有用到过viewport。下面的内容，主要就...
CSS等比例缩放的盒子
literarygirl的博客
06-07 1167
你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。 如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。 可以看到把宽度设置为了原来的一半的同时，图片的高度并不是保持原来的大小，而是相应的也变成了原来的一半，使得图片仍能够保持原有的比例。同理把高度设成原来的一半也如此。 作为对照，我们看看单独修改其他元素的宽和高会产生什么样的效果： 上
uniapp关于image与cover-image
qq_29407683的博客
06-01 2529
image可以根据设置mode来设置等比例缩放 cover-image是浮在dom上面的图片 一般情况下 使用image标签，如果想让你的图片不缩放，保持原图大小，使用cover-image。
如何用纯css使div保存等比例缩放
张致豪
05-27 9590
当一个div盒子的宽度为百分比时，如何使盒子按等比例缩放？ 我开始的想法是获取盒子宽度，然后将盒子宽度按比例计算得到高度，这样盒子就可以等比例缩放了。 但是遇到一个问题，盒子宽度为百分比，我们不能直接获取到盒子宽度，如果用js去获取盒子宽度又太麻烦，最后发现了css的padding属性。 padding属性的百分比都是基于父元素的width值。 /* 基于父元素的width */ padding...
Unity 通过代码控制Texture进行缩放
不在同一频道上的呆子的博客
11-28 1154
Unity 通过代码控制Texture进行缩放
如何让图片按比例响应式缩放、并自动裁剪的css技巧
热门推荐
onlyhom's notebook
01-18 6万+
如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时， 如果想要图片按比例缩放， 最简单的就是把img宽度设为100%， 不设置高度，高度就会自动跟着高度缩放但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等， 然而图片尺寸不是这个比例，又不想让图片拉伸变形，自
uniappcanvas实现图片等比缩放
06-03
要在uniapp中实现图片的等比缩放，可以使用canvas来进行处理。具体步骤如下： 1. 获取图片信息 使用uniapp提供的uni.getImageInfo()方法获取图片的信息，包括宽度和高度等。 2. 计算缩放比例 根据需要缩放的大小和图片的实际大小，计算出缩放比例。 3. 创建canvas 使用uni.createCanvasContext()方法创建canvas上下文。 4. 绘制图片 使用canvas上下文提供的drawImage()方法将图片绘制到canvas中。 5. 设置canvas尺寸 根据缩放比例和图片实际大小，设置canvas的尺寸。 6. 绘制缩放后的图片 使用canvas上下文提供的drawImage()方法将缩放后的图片绘制到canvas中。 7. 导出图片 使用canvas.toTempFilePath()方法将canvas导出为图片。 下面是一个示例代码，用于实现图片的等比缩放： ```javascript uni.getImageInfo({ src: '图片路径', success: function (res) { var ratio = 2; // 缩放比例 var canvasWidth = res.width / ratio; // 计算缩放后的宽度 var canvasHeight = res.height / ratio; // 计算缩放后的高度 var ctx = uni.createCanvasContext('canvasId'); // 创建canvas上下文 ctx.drawImage('图片路径', 0, 0, canvasWidth, canvasHeight); // 绘制图片 ctx.draw(false, function () { uni.canvasToTempFilePath({ // 导出图片 canvasId: 'canvasId', success: function (res) { console.log(res.tempFilePath); } }); }); } }); ``` 需要注意的是，上述代码中的canvasId需要在页面中定义一个canvas元素，并设置其id为canvasId。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值