纯css移动端图片的自适应

最新推荐文章于 2023-01-12 10:35:20 发布

请你吃个冰激凌

最新推荐文章于 2023-01-12 10:35:20 发布

阅读量2.6k

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45170083/article/details/105279190

版权

本文探讨了如何在移动端页面中实现图片的等比例自适应。通过设置图片宽度为屏幕宽度，并利用CSS的padding和百分比高度来维持宽高比，确保图片在不同平台上展示效果良好。使用`background-size: cover;`属性可以让图片填充剩余空间，达到适应屏幕的目的。

摘要由CSDN通过智能技术生成

移动端页面，少不了图片，但是手机端要适应的平台相对较多，如果图片写死了，多平台会很难看，只有图片宽和高同时动态响应才可以。
那么了解下图片的等比例适配

        position: relative;
        background-color: #FFFFFF;
        width: 100%;
        height: 0;
        padding-bottom: 55.8823%;
        background

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

请你吃个冰激凌

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端 图片自适应

Knight7890的博客

06-20

2569

/*移动端图片自适应 精华 */ html lang="en"> head> meta charset="UTF-8"> title>图片自适应title> meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0, user-scalable=0,width=device-wi

移动端背景图片自适应

炫爱小七的博客

06-10

2361

移动端背景图片自适应 /*兼容安卓手机没有高度导致无法显示背景图片*/ body{ width:100vw; height:100vh; padding: 0; margin: 0; background-image: url("../img/common.png"); background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-size: 100%

参与评论您还未登录，请先登录后发表或查看评论

移动端图片的自适应

weixin_46002223的博客

07-09

694

解决因照片没有高引起的抖动图片的宽240px，高200px 高比宽比例为 31.25% 如果直接写在高处，则是相对于父级元素的高度 .wrapper { overflow: hidden; width: 100%; height: 0; padding-bottom: 31.25%; background-color: #eee; } .swiper-img { width: 100%; } 或者 .wrapper { width: 100%; height: .

CSS - 移动端容器背景大图片自动适应屏幕

王佳斌

03-11

3007

前言有时候，我们希望容器背景大图片自动适用容器宽高，均匀平铺在页面，几行 CSS 代码即可搞定。实现给父容器设置即可。 .view{ background-image: url(x.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } ...

移动端图片自适应全屏铺满屏幕

怎奈你何的博客

08-06

938

移动端背景图自适应

移动Web开发图片自适应两种常见情况解决方案

热门推荐

freshlover的专栏

08-02

6万+

本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。开始吧在做配合手机客户端的Web wap页面时，发现文章对图片显示的需求有两种特别重要的情况，一是对于图集，这种文章只需要左右滑动浏览，最好的体验是让图片缩放显示在屏幕有效范围内，防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情，用户体验大大降低。二是图文混排的文章，图片最大宽度不超过屏

rem移动端h5自适应工具pixelRem.js

09-07

超简单使用方法：import导入默认tool对象；tool.remDefault模式下750设计稿手机全屏CSS设置为750/1000=0.75rem；tool.remHalf模式下为750/100/2=3.75rem；

移动端h5框架自适应_最佳移动端h5自适应rem适配方案

weixin_42382398的博客

01-14

1240

一、利用lib-flexible、postcss-plugin-px2rem插件进行移动端rem适配。1、第一引入lib-flexible .安装lib-flexible：　　npm i lib-flexible --save-dev在项目的入口main.js文件中引入lib-flexible:import 'lib-flexible'，在index.html中是否去掉metaname=...

浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)

09-22

4. 使用JavaScript进行动态布局调整也是实现移动端自适应的一个手段。通过检测设备类型和屏幕尺寸，可以在客户端根据实际情况动态调整网页布局和样式。这通常涉及到编写一些脚本来监听窗口大小变化，并实时调整页面...

电信设备-一种移动端唐诗自适应布局方法.zip

09-19

这个压缩包“电信设备-一种移动端唐诗自适应布局方法.zip”内包含的“一种移动端唐诗自适应布局方法.pdf”文档，很可能是详细阐述了针对移动端优化唐诗展示的技术方案。唐诗是中国古代文化的瑰宝，其字句精炼、...

移动端图片显示自适应填充全屏

icon-Y的博客

03-25

282

移动端图片显示自适应填充全屏创建一个全屏的dom元素 <div id='background'></div> #background { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url(../img/advertisement.png); posi

移动端背景图全屏自适应

weixin_44860440的博客

05-27

1093

html <div class="code"> < img src="图片地址.jpg"/> </div> css .code{ position:absolute; z-index:-1; width:100%; height:100%; top:0px; left:0px; } img{ width.

设置背景图片的两种方式，并解决手机端背景图片高度自适应问题

weixin_30902251的博客

03-07

633

1 设置背景图片的两种方式：方式一： <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; ...

图片大小自适应、pc端、手机端

林中明月间丶

01-12

2万+

写页面的时候经常会遇到需要图片自适应容器大小这样的情况： <style> div{width:400px;height:400px;border:1px solid #000; } img{width:100%;height:100%;} </style> 不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小...

css-手机端自适应-1.1

caishu1995的博客

06-13

317

昨天改了个网站，今天老大说让手机端的话字体太小咯。找了半天都感觉很费劲的样子。啦啦啦，最后找到了个这个，这个虽然当时学的时候知道是手机端的，但没用过。没想到这么好用٩(❛ᴗ❛) //width 设置宽度，12 / "width-device" //initial-scale 设置页面的初始缩放值，1.1 //minimum-scale 允许用户的最小缩放值，1.1 //maxi...

移动端自适应

jdrunk的博客

08-13

169

CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组分，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断为true时，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为flase，样式同样被下载，但是不会应用。 1、媒体类型 all 使用所有的设备 print 适用于打印用纸或打印预览视图 screen 主要用于电脑、手机、平板等...

【2023.1.12】HTML移动端背景图自适应CSS