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

最新推荐文章于 2024-06-28 14:50:11 发布
最新推荐文章于 2024-06-28 14:50:11 发布
阅读量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;}

 

雨中来客
关注
专栏目录
【移动web】Flex布局模型、移动适配、响应式网页
zilin_taku的博客
07-28 825
flex布局/弹性布局-是一种浏览器提倡的布局模型-布局网页更简单、灵活-避免浮动脱标的问题。
移动端常见布局
HXL521666的博客
11-09 3634
移动端技术选型 1.单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 2.响应式页面兼容移动端（其次） 媒体查询 bootstrap 流式布局（百分比布局） 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动Web开发使用的比较常见的布局方式 max-width(max-height)最大宽度 min-widt
图片压缩、图片等比缩放软件
11-21
图片压缩、图片等比缩放软件图片压缩、图片等比缩放软件
php背景图片满屏,CSS实现响应式全屏背景图
weixin_36132766的博客
03-11 813
当前很流行的一种网页形式就是满屏大图，本文将用最简单的方式实现该效果。用到了CSS 属性background-size,无需javascript。核心概念使用background-size 属性，填充整个viewport当css属性background-size 值为cover时，浏览器会自动按比例缩放背景图的宽和高，直到大于或等于viewport的宽和高使用媒体查询为移动设备提供更小尺寸的背景图...
Unity 图片等比例自适应缩放
最新发布
u010197227的博客
06-28 307
【代码】Unity 图片等比例自适应缩放。
响应式开发: 宽高等比例缩放
weixin_34218890的博客
04-15 148
响应式开发: 宽高等比例缩放<style> .box {width: 20%;height:0;padding-bottom:20%;background-color:red;}</style><div class="box"> hello world</div>原理:这里涉及到百分比布局的问题;百分比布局中，元素的宽高是继承自父级元素...
图片自适应浏览器窗口宽度——就是响应式图片等比缩放效果
weixin_34234721的博客
05-13 601
&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{
轮播图el-carousel内，图片的响应式等比缩放
公z号：职场爱学习
06-23 2752
做轮播图的时候，图片不设置宽高，那么，会导致只能显示一部分图片，或者图片被压扁了。所以，需要设置宽度和高度。 el-carousel的高度默认是300px，如果里面的图片超出这个高度，就只能显示一部分。因此，需要修改el-carousel的高度。 ...
移动WEB开发之流式布局
m0_72711350的博客
11-15 456
移动端。
CSS第九章 移动端布局-Viewport视口/移动端适配方案
晓葉斑比
06-04 1874
Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器 切换平台之后，一定要重新刷新浏览器 访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。 访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检
uni-app基础知识
baidu_33575737的博客
06-29 1535
uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所
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; }
图片等比缩放函数
张海涛的专栏
03-24 1361
//==================================================================== /* *等比缩放函数（以保存的方式实现） *@param string $picname 被缩放的处理图片源 *@param int $maxx 缩放后图片的最大宽度 *@param int $maxy 缩放后图片的最大高度 *@param string $
响应性图片等比例缩放
weixin_43988544的博客
12-12 415
看到的一篇比较详细的文章 链接: link.
css 图片等比例缩小_CSS从零开始——进阶样式（5）
weixin_39931923的博客
11-22 940
今天这一章节主要是响应式布局需要补充的部分，以及通过 CSS 进行元素的2D、3D转换。1 响应式布局响应式布局，其实就是同一个页面会针对不同设备的浏览器大小，改变为不同的布局结构，使得页面可以适应不同的环境，以最佳的布局显示页面内容。前面的几个章节，其实已经零散的把响应式布局必需的几个关键点都提到了，包括：弹性盒子、网格布局、媒体查询，而且在样例当中也有用到过viewport。下面的内容，主要就...
CSS等比例缩放的盒子
literarygirl的博客
06-07 1188
你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。 如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。 可以看到把宽度设置为了原来的一半的同时，图片的高度并不是保持原来的大小，而是相应的也变成了原来的一半，使得图片仍能够保持原有的比例。同理把高度设成原来的一半也如此。 作为对照，我们看看单独修改其他元素的宽和高会产生什么样的效果： 上
uniapp关于image与cover-image
qq_29407683的博客
06-01 2576
image可以根据设置mode来设置等比例缩放 cover-image是浮在dom上面的图片 一般情况下 使用image标签，如果想让你的图片不缩放，保持原图大小，使用cover-image。
如何用纯css使div保存等比例缩放
张致豪
05-27 9635
当一个div盒子的宽度为百分比时，如何使盒子按等比例缩放？ 我开始的想法是获取盒子宽度，然后将盒子宽度按比例计算得到高度，这样盒子就可以等比例缩放了。 但是遇到一个问题，盒子宽度为百分比，我们不能直接获取到盒子宽度，如果用js去获取盒子宽度又太麻烦，最后发现了css的padding属性。 padding属性的百分比都是基于父元素的width值。 /* 基于父元素的width */ padding...
C#实现图片等比缩放与正方形裁剪功能
在C#编程中，实现图片的等比缩放和剪切功能是一个常见的图像处理任务，特别是在用户界面或需要处理用户上传头像的场景下。本文档主要介绍了一个名为`ptImage`的类，它包含一个名为`CutForSquare`的方法，用于处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值