css如何实现图片响应式等比例缩放，裁剪

最新推荐文章于 2024-04-22 21:05:34 发布
最新推荐文章于 2024-04-22 21:05:34 发布
阅读量322 收藏 1
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/novice007/p/8117846.html
版权

 

　　<div class="bg_picWrapper"  :style="{backgroundImage:'url('+img+')'}">------------vue中动态绑定背景图片显示的方式

　　　　<div class="bg_pic"></div>

　　</div>

　　在项目中我们经常会跟图片打交道，遇到显示图片的需求，我们大多数人的做法通常都是用<img>（在小程序中用<image>）标签，利用这个标签的src属性绑定图片显示；但是这样会出现一个问题：就是图片的显示是否会等比例显示且不会出现图片的拉伸（或者压缩）效果？如果你对图片等比例显示不是特别清楚，那么你会遇到一个问题：ui给的设计图中图片是完整显示，而你做出来的页面中，图片会出现拉伸压缩的效果，也许你会到网上找插件，这个裁剪能够满足将图片按给定的框框裁剪，这样就不用担心图片显示的问题了？真的吗？那我只能说你这是有点杀鸡用牛刀，小题大作了。为什么这么说？

　　关于图片的宽度与高度的赋值我们知道有两种方式：1、直接在css中设置图片的的width、height属性，2、在js中设置图片的style.width。不过我这个人一致都觉得能够用css解决的问题就不要用js来解决，所以我会选第一种方式：直接在css中设置图片的width、height值。为什么要在css中设置图片的width、height值呢？因为在css中，如果设置图片的width、height中的一个值，会将图片等比例缩放，并且不会出席那那所谓的压缩与拉伸问题。而且我们要的不就是这种效果吗？所以这种方式离我们要的效果又进了一步。但是这还不够，我们需要的不仅是图片不拉伸压缩，还要图片你能够绝大部分都可以在给定的框框内显示出来，图片的绝大部分显示出来，也就是说可以有一次部分是可以被遮住的了？css的图片图片不就有这种尺寸的属性吗！background-size:cover/contain。代码如下：

　　.bg_pic{

　　　　width:100%;

　　　　height:100%;

　　　　background-position: center  center;

　　　　background-repeat: no-repeat;

　　　　background-size:cover;

　　　　-webkit-background-size:cover;

　　　　-moz-background-size:cover;

　　}

　　如果你直接拿着这个代码去试，这还存在着一点小问题：就是背景图片没有完全显示在bg_picWrapper框中，将height:100%;改为height:0;padding-bottom:100%即可；

可能自己经验尚浅。如果有不同的意见或者有更好的解决方法可以在下面留下您最宝贵的建议或者解决方式，欢迎交流

转载于:https://www.cnblogs.com/novice007/p/8117846.html

weixin_34368949
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于cropper.js的简单图片裁剪插件
03-08
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用，本代码实现了图片剪切比例设置、宽高设置等功能。
图片水印 缩略图+裁剪（MyImageHelper）
07-25
using System; using System.Collections.Generic; using System.Text; using System.IO; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; namespace rkk0108.Controllers { /// <summary> /// 图片处理 /// http://www.cnblogs.com/wu-jian/ /// /// 吴剑 2011-02-20 创建 /// 吴剑 2012-08-08 修改 /// </summary> public class MyImageHelper { #region 正方型裁剪并缩放 /// <summary> /// 正方型裁剪 /// 以图片中心为轴心，截取正方型，然后等比缩放 /// 用于头像处理 /// </summary> /// <remarks>吴剑 2012-08-08</remarks> /// <param name="filePath">图片绝对地址</param> /// <param name="fileSaveUrl">缩略图存放地址</param> /// <param name="side">指定的边长（正方型）</param> /// <param name="quality">质量（范围0-100）</param> public static void CutForSquare(string filePath, string fileSaveUrl, int side, int quality) { FileStream fileStream = new FileStream(filePath, FileMode.Open); Stream fromFile = fileStream as Stream; //创建目录 string dir = Path.GetDirectoryName(fileSaveUrl); if (!Directory.Exists(dir)) Directory.CreateDirectory(dir); //原始图片（获取原始图片创建对象，并使用流中嵌入的颜色管理信息） System.Drawing.Image initImage = System.Drawing.Image.FromStream(fromFile, true); //原图宽高均小于模版，不作处理，直接保存 if (initImage.Width <= side && initImage.Height <= side) { initImage.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg); } else { //原始图片的宽、高 int initWidth = initImage.Width; int initHeight = initImage.Height; //非正方型先裁剪为正方型 if (initWidth != initHeight) { //截图对象 System.Drawing.Image pickedImage = null; System.Drawing.Graphics pickedG = null; //宽大于高的横图 if (initWidth > initHeight) { //对象实例化 pickedImage = new System.Drawing.Bitmap(initHeight, initHeight); pickedG = System.Drawing.Graphics.FromImage(pickedImage); //设置质量 pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //定位 Rectangle fromR = new Rectangle((initWidth - initHeight) / 2, 0, initHeight, initHeight); Rectangle toR = new Rectangle(0, 0, initHeight, initHeight); //画图 pickedG.DrawImage(initImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel); //重置宽 initWidth = initHeight; } //高大于宽的竖图 else { //对象实例化 pickedImage = new System.Drawing.Bitmap(initWidth, initWidth); pickedG = System.Drawing.Graphics.FromImage(pickedImage); //设置质量 pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //定位 Rectangle fromR = new Rectangle(0, (initHeight - initWidth) / 2, initWidth, initWidth); Rectangle toR = new Rectangle(0, 0, initWidth, initWidth); //画图 pickedG.DrawImage(initImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel); //重置高 initHeight = initWidth; } //将截图对象赋给原图 initImage = (System.Drawing.Image)pickedImage.Clone(); //释放截图资源 pickedG.Dispose(); pickedImage.Dispose(); } //缩略图对象 System.Drawing.Image resultImage = new System.Drawing.Bitmap(side, side); System.Drawing.Graphics resultG = System.Drawing.Graphics.FromImage(resultImage); //设置质量 resultG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; resultG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //用指定背景色清空画布 resultG.Clear(Color.White); //绘制缩略图 resultG.DrawImage(initImage, new System.Drawing.Rectangle(0, 0, side, side), new System.Drawing.Rectangle(0, 0, initWidth, initHeight), System.Drawing.GraphicsUnit.Pixel); //关键质量控制 //获取系统编码类型数组,包含了jpeg,bmp,png,gif,tiff ImageCodecInfo[] icis = ImageCodecInfo.GetImageEncoders(); ImageCodecInfo ici = null; foreach (ImageCodecInfo i in icis) { if (i.MimeType == "image/jpeg" || i.MimeType == "image/bmp" || i.MimeType == "image/png" || i.MimeType == "image/gif") { ici = i; } } EncoderParameters ep = new EncoderParameters(1); ep.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)quality); //保存缩略图 resultImage.Save(fileSaveUrl, ici, ep); //释放关键质量控制所用资源 ep.Dispose(); //释放缩略图资源 resultG.Dispose(); resultImage.Dispose(); //释放原始图片资源 initImage.Dispose(); } } #endregion #region 自定义裁剪并缩放 /// <summary> /// 指定长宽裁剪 /// 按模版比例最大范围的裁剪图片并缩放至模版尺寸 /// </summary> /// <remarks>吴剑 2012-08-08</remarks> /// <param name="fromFile">原图Stream对象</param> /// <param name="fileSaveUrl">保存路径</param> /// <param name="maxWidth">最大宽(单位:px)</param> /// <param name="maxHeight">最大高(单位:px)</param> /// <param name="quality">质量（范围0-100）</param> public static void CutForCustom(System.IO.Stream fromFile, string fileSaveUrl, int maxWidth, int maxHeight, int quality) { //从文件获取原始图片，并使用流中嵌入的颜色管理信息 System.Drawing.Image initImage = System.Drawing.Image.FromStream(fromFile, true); //原图宽高均小于模版，不作处理，直接保存 if (initImage.Width <= maxWidth && initImage.Height <= maxHeight) { initImage.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg); } else { //模版的宽高比例 double templateRate = (double)maxWidth / maxHeight; //原图片的宽高比例 double initRate = (double)initImage.Width / initImage.Height; //原图与模版比例相等，直接缩放 if (templateRate == initRate) { //按模版大小生成最终图片 System.Drawing.Image templateImage = new System.Drawing.Bitmap(maxWidth, maxHeight); System.Drawing.Graphics templateG = System.Drawing.Graphics.FromImage(templateImage); templateG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; templateG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; templateG.Clear(Color.White); templateG.DrawImage(initImage, new System.Drawing.Rectangle(0, 0, maxWidth, maxHeight), new System.Drawing.Rectangle(0, 0, initImage.Width, initImage.Height), System.Drawing.GraphicsUnit.Pixel); templateImage.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg); } //原图与模版比例不等，裁剪后缩放 else { //裁剪对象 System.Drawing.Image pickedImage = null; System.Drawing.Graphics pickedG = null; //定位 Rectangle fromR = new Rectangle(0, 0, 0, 0);//原图裁剪定位 Rectangle toR = new Rectangle(0, 0, 0, 0);//目标定位 //宽为标准进行裁剪 if (templateRate > initRate) { //裁剪对象实例化 pickedImage = new System.Drawing.Bitmap(initImage.Width, (int)System.Math.Floor(initImage.Width / templateRate)); pickedG = System.Drawing.Graphics.FromImage(pickedImage); //裁剪源定位 fromR.X = 0; fromR.Y = (int)System.Math.Floor((initImage.Height - initImage.Width / templateRate) / 2); fromR.Width = initImage.Width; fromR.Height = (int)System.Math.Floor(initImage.Width / templateRate); //裁剪目标定位 toR.X = 0; toR.Y = 0; toR.Width = initImage.Width; toR.Height = (int)System.Math.Floor(initImage.Width / templateRate); } //高为标准进行裁剪 else { pickedImage = new System.Drawing.Bitmap((int)System.Math.Floor(initImage.Height * templateRate), initImage.Height); pickedG = System.Drawing.Graphics.FromImage(pickedImage); fromR.X = (int)System.Math.Floor((initImage.Width - initImage.Height * templateRate) / 2); fromR.Y = 0; fromR.Width = (int)System.Math.Floor(initImage.Height * templateRate); fromR.Height = initImage.Height; toR.X = 0; toR.Y = 0; toR.Width = (int)System.Math.Floor(initImage.Height * templateRate); toR.Height = initImage.Height; } //设置质量 pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //裁剪 pickedG.DrawImage(initImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel); //按模版大小生成最终图片 System.Drawing.Image templateImage = new System.Drawing.Bitmap(maxWidth, maxHeight); System.Drawing.Graphics templateG = System.Drawing.Graphics.FromImage(templateImage); templateG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; templateG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; templateG.Clear(Color.White); templateG.DrawImage(pickedImage, new System.Drawing.Rectangle(0, 0, maxWidth, maxHeight), new System.Drawing.Rectangle(0, 0, pickedImage.Width, pickedImage.Height), System.Drawing.GraphicsUnit.Pixel); //关键质量控制 //获取系统编码类型数组,包含了jpeg,bmp,png,gif,tiff ImageCodecInfo[] icis = ImageCodecInfo.GetImageEncoders(); ImageCodecInfo ici = null; foreach (ImageCodecInfo i in icis) { if (i.MimeType == "image/jpeg" || i.MimeType == "image/bmp" || i.MimeType == "image/png" || i.MimeType == "image/gif") { ici = i; } } EncoderParameters ep = new EncoderParameters(1); ep.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)quality); //保存缩略图 templateImage.Save(fileSaveUrl, ici, ep); //templateImage.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg); //释放资源 templateG.Dispose(); templateImage.Dispose(); pickedG.Dispose(); pickedImage.Dispose(); } } //释放资源 initImage.Dispose(); } #endregion #region 等比缩放 /// <summary> /// 图片等比缩放 /// </summary> /// <remarks>吴剑 2012-08-08</remarks> /// <param name="fromFile">原图Stream对象</param> /// <param name="savePath">缩略图存放地址</param> /// <param name="targetWidth">指定的最大宽度</param> /// <param name="targetHeight">指定的最大高度</param> /// <param name="watermarkText">水印文字(为""表示不使用水印)</param> /// <param name="watermarkImage">水印图片路径(为""表示不使用水印)</param> public static void ZoomAuto(System.IO.Stream fromFile, string savePath, System.Double targetWidth, System.Double targetHeight, string watermarkText, string watermarkImage) { //创建目录 string dir = Path.GetDirectoryName(savePath); if (!Directory.Exists(dir)) Directory.CreateDirectory(dir); //原始图片（获取原始图片创建对象，并使用流中嵌入的颜色管理信息） System.Drawing.Image initImage = System.Drawing.Image.FromStream(fromFile, true); //原图宽高均小于模版，不作处理，直接保存 if (initImage.Width <= targetWidth && initImage.Height <= targetHeight) { //文字水印 if (watermarkText != "") { using (System.Drawing.Graphics gWater = System.Drawing.Graphics.FromImage(initImage)) { System.Drawing.Font fontWater = new Font("黑体", 10); System.Drawing.Brush brushWater = new SolidBrush(Color.White); gWater.DrawString(watermarkText, fontWater, brushWater, 10, 10); gWater.Dispose(); } } //透明图片水印 if (watermarkImage != "") { if (File.Exists(watermarkImage)) { //获取水印图片 using (System.Drawing.Image wrImage = System.Drawing.Image.FromFile(watermarkImage)) { //水印绘制条件：原始图片宽高均大于或等于水印图片 if (initImage.Width >= wrImage.Width && initImage.Height >= wrImage.Height) { Graphics gWater = Graphics.FromImage(initImage); //透明属性 ImageAttributes imgAttributes = new ImageAttributes(); ColorMap colorMap = new ColorMap(); colorMap.OldColor = Color.FromArgb(255, 0, 255, 0); colorMap.NewColor = Color.FromArgb(0, 0, 0, 0); ColorMap[] remapTable = { colorMap }; imgAttributes.SetRemapTable(remapTable, ColorAdjustType.Bitmap); float[][] colorMatrixElements = { new float[] {1.0f, 0.0f, 0.0f, 0.0f, 0.0f}, new float[] {0.0f, 1.0f, 0.0f, 0.0f, 0.0f}, new float[] {0.0f, 0.0f, 1.0f, 0.0f, 0.0f}, new float[] {0.0f, 0.0f, 0.0f, 0.5f, 0.0f},//透明度:0.5 new float[] {0.0f, 0.0f, 0.0f, 0.0f, 1.0f} }; ColorMatrix wmColorMatrix = new ColorMatrix(colorMatrixElements); imgAttributes.SetColorMatrix(wmColorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); gWater.DrawImage(wrImage, new Rectangle(initImage.Width - wrImage.Width, initImage.Height - wrImage.Height, wrImage.Width, wrImage.Height), 0, 0, wrImage.Width, wrImage.Height, GraphicsUnit.Pixel, imgAttributes); gWater.Dispose(); } wrImage.Dispose(); } } } //保存 initImage.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg); } else { //缩略图宽、高计算 double newWidth = initImage.Width; double newHeight = initImage.Height; //宽大于高或宽等于高（横图或正方） if (initImage.Width > initImage.Height || initImage.Width == initImage.Height) { //如果宽大于模版 if (initImage.Width > targetWidth) { //宽按模版，高按比例缩放 newWidth = targetWidth; newHeight = initImage.Height * (targetWidth / initImage.Width); } } //高大于宽（竖图） else { //如果高大于模版 if (initImage.Height > targetHeight) { //高按模版，宽按比例缩放 newHeight = targetHeight; newWidth = initImage.Width * (targetHeight / initImage.Height); } } //生成新图 //新建一个bmp图片 System.Drawing.Image newImage = new System.Drawing.Bitmap((int)newWidth, (int)newHeight); //新建一个画板 System.Drawing.Graphics newG = System.Drawing.Graphics.FromImage(newImage); //设置质量 newG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; newG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; //置背景色 newG.Clear(Color.White); //画图 newG.DrawImage(initImage, new System.Drawing.Rectangle(0, 0, newImage.Width, newImage.Height), new System.Drawing.Rectangle(0, 0, initImage.Width, initImage.Height), System.Drawing.GraphicsUnit.Pixel); //文字水印 if (watermarkText != "") { using (System.Drawing.Graphics gWater = System.Drawing.Graphics.FromImage(newImage)) { System.Drawing.Font fontWater = new Font("宋体", 10); System.Drawing.Brush brushWater = new SolidBrush(Color.White); gWater.DrawString(watermarkText, fontWater, brushWater, 10, 10); gWater.Dispose(); } } //透明图片水印 if (watermarkImage != "") { if (File.Exists(watermarkImage)) { //获取水印图片 using (System.Drawing.Image wrImage = System.Drawing.Image.FromFile(watermarkImage)) { //水印绘制条件：原始图片宽高均大于或等于水印图片 if (newImage.Width >= wrImage.Width && newImage.Height >= wrImage.Height) { Graphics gWater = Graphics.FromImage(newImage); //透明属性 ImageAttributes imgAttributes = new ImageAttributes(); ColorMap colorMap = new ColorMap(); colorMap.OldColor = Color.FromArgb(255, 0, 255, 0); colorMap.NewColor = Color.FromArgb(0, 0, 0, 0); ColorMap[] remapTable = { colorMap }; imgAttributes.SetRemapTable(remapTable, ColorAdjustType.Bitmap); float[][] colorMatrixElements = { new float[] {1.0f, 0.0f, 0.0f, 0.0f, 0.0f}, new float[] {0.0f, 1.0f, 0.0f, 0.0f, 0.0f}, new float[] {0.0f, 0.0f, 1.0f, 0.0f, 0.0f}, new float[] {0.0f, 0.0f, 0.0f, 0.5f, 0.0f},//透明度:0.5 new float[] {0.0f, 0.0f, 0.0f, 0.0f, 1.0f} }; ColorMatrix wmColorMatrix = new ColorMatrix(colorMatrixElements); imgAttributes.SetColorMatrix(wmColorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); gWater.DrawImage(wrImage, new Rectangle(newImage.Width - wrImage.Width, newImage.Height - wrImage.Height, wrImage.Width, wrImage.Height), 0, 0, wrImage.Width, wrImage.Height, GraphicsUnit.Pixel, imgAttributes); gWater.Dispose(); } wrImage.Dispose(); } } } //保存缩略图 newImage.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg); //释放资源 newG.Dispose(); newImage.Dispose(); initImage.Dispose(); } } #endregion #region 其它 /// <summary> /// 判断文件类型是否为WEB格式图片 /// (注：JPG,GIF,BMP,PNG) /// </summary> /// <param name="contentType">HttpPostedFile.ContentType</param> /// <returns></returns> public static bool IsWebImage(string contentType) { if (contentType == "image/pjpeg" || contentType == "image/jpeg" || contentType == "image/gif" || contentType == "image/bmp" || contentType == "image/png") { return true; } else { return false; } } #endregion }//end class }
图片 等比放大 排版 裁剪 css
daxi玫瑰的博客
02-09 287
图片 等比放大 排版 裁剪 css
js+CSS 图片等比缩小并垂直居中实现代码.docx
01-19
js+CSS 图片等比缩小并垂直居中实现代码.docx
等比例放大或缩小 背景图片_8-剪映比例调节和背景的讲解（高逼格横板变竖版）-剪映教程...
weixin_34296646的博客
01-04 3511
大家好我是花猫大叔， 这是手机视频剪辑之剪影教程的第8节课程：比例 背景 抖音是9:16 的 有的手机是3:4 比如pad 1:1 是正方形4:3 是我们原来电视机的大小16:9 是横屏 的这种模式如果不想黑屏 怎么办？ 可以放大，具体的我已经录制了视频，请看下边视频剪辑之剪影教程的第8节课程https://www.zhihu.com/video/1185888109215096832原创不易，...
CSS如何实现图片等比例缩放不变形
Ronaldouy的博客
10-08 1万+
CSS如何实现图片等比例缩放不变形
css 图片居中放大,不同比例图片居中缩放显示的三种方法
weixin_33855578的博客
08-03 3849
效果方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示，兼容性最好HTML代码 复制代码CSS代码.img-box{/*限定图片盒子宽高*/width:500px;height:500px;}img{width:auto;height:auto;max-width:100%;max-height:100%;/*不定宽高的图片居中显示*/position: rel...
css，元素/图片未知宽高，上下左右居中，且图片不超过外框/遮罩范围，最大宽高等比缩放
Shimeng_1989的博客
08-01 472
css未知宽高，上下左右居中。且图片不超过div范围，最大宽高 等比缩放。最大范围内，等比缩放图片大小
如何让图片按比例响应式缩放、并自动裁剪的css技巧
热门推荐
onlyhom's notebook
01-18 6万+
如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时， 如果想要图片按比例缩放， 最简单的就是把img宽度设为100%， 不设置高度，高度就会自动跟着高度缩放但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等， 然而图片尺寸不是这个比例，又不想让图片拉伸变形，自
两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧
wangle_style的博客
12-05 4797
两种方式各有各的优势和短板： 一：也是大家最经常用的，如下：         这种方式优势在于： 1，可以结合flexble等手机适配框架实现手机端的适配  （width: 4.0rem;） 2，可以结合echo.js或者lazyload.js等懒加载插件 备注：懒加载时style="width: 100%;"是必须要设置的 这种方式短板也很明显： 1，高度是自适应宽
css+js完美控制图片大小
12-08
使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。 css+js完美控制图片大小 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
CSS3的background-size属性，实现响应式式图片等比例缩放。
01-23
CSS3的background-size属性，实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
纯css实现高按照宽比例缩放
12-20
纯css实现高按照宽比例缩放，本例子，适用与图片、视频 16/9格式，具体计算公式可根据注释内公式进行计算
CSS实现图片按固定大小等比例缩放
12-23
CSS实现图片按固定大小等比例缩放，保证大图片按照 比例缩放到合适。
CSS实现图片等比例缩小不变形的实例代码
09-22
主要介绍了CSS实现图片等比例缩小不变形，通过实例代码给大家介绍了css控制图片大小不变形的相关知识，需要的朋友参考下吧
一款纯css3实现的响应式导航
09-25
之前为大家介绍了好几款响应式导航。今天再给大家带来一款纯css3实现的响应式导航。这款导航还有个响应式的搜索框。具体代码请看下
CSS3响应式图片悬停倾斜特效
07-14
CSS3响应式图片悬停倾斜特效是一款使用bootstrap制作简洁的响应式图片列表，鼠标悬停图片倾斜展示特效。
Unity中的UI系统之UGUI
最新发布
K_CRACKING的博客
04-22 534
UGUI是什么UGUI是Unity引擎内自带的UI系统官方称之为:Unity UI是目前Unity商业游戏开发中使用最广泛的UI系统开发解决方案它是基于Unity游戏对象的UI系统,只能用来做游戏UI功能不能用于开发Unity编辑器中内置的用户界面如何在Unity中使用UGUI直接在Hierarchy窗口中右键选择UIUI中所有内容都是UGUI相关控件六大基础组件1、Canvas对象上依附的:①Canvas:画布组件,主要用于渲染UI控件②。
开源Windows12网页版HTML源码
爱酷码的博客
04-17 375
开源Windows12网页版HTML源码，无需安装就能用的Win12网页版来了Windows12概念版（PoweredbyPowerPoint）后深受启发，于是通过使用HTML、CSS、js等技术做了这样一个模拟板的Windows12系统，并已发布至github进行开源。这个模拟版Windows12只是一个网页并不是真正的系统，直接打开就能体验，大家看这个UI风格真的绝了，但好像是不是有点像MacOS。
css3的background-size属性,实现响应式式图片等比例缩放。
09-01
CSS3的background-size属性可以用来控制背景图片的尺寸以实现响应式图片的等比例缩放。该属性有以下几种取值： 1. auto: 默认值，背景图片保持原始尺寸显示，不做缩放。 2. length: 可以使用具体的长度值，如px或em，来指定背景图片的宽度和高度的具体尺寸。 3. percentage: 可以使用百分比来指定背景图片的宽度和高度相对于容器的比例。 4. cover: 背景图片被缩放到完全覆盖容器，并且保持图片的长宽比例，可能会造成部分图片内容被裁剪。 5. contain: 背景图片被调整大小以适应容器的尺寸，同时保持图片的长宽比例，不会裁剪图片内容。 使用background-size属性实现响应式图片等比例缩放的步骤如下： 1. 定义容器的宽度和高度，并设置背景图片。 2. 使用background-size属性来控制背景图片的尺寸。如果希望图片完全覆盖容器，可以设置为cover；如果希望图片适应容器并保持比例，可以设置为contain。 3. 根据需要，使用媒体查询来调整容器的尺寸和background-size属性的具体取值，以适应不同的屏幕尺寸和设备。 通过以上步骤，可以实现响应式图片等比例缩放。无论在不同的屏幕尺寸下，背景图片都能够根据容器的大小进行自动调整，保持图片的比例，并适应不同的设备。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值