使用VW时，图片的问题

最新推荐文章于 2022-01-18 13:56:40 发布
最新推荐文章于 2022-01-18 13:56:40 发布
阅读量246 收藏
点赞数
原文链接：http://www.cnblogs.com/zhaobao1830/p/9660813.html
版权

在项目中，使用了VW适配，给图片直接设置了width和height，浏览器模拟正常，在手机上就不显示

解决办法是：在图片外面包一层div，设置width和height，然后图片设置width:100%,height:100%

转载于:https://www.cnblogs.com/zhaobao1830/p/9660813.html

aiguai2216
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
- **移动设备开发**：在设计移动页面时，使用vw和vh设置字体大小可能会导致横屏和竖屏显示差异。此时，vmin和vmax可以帮助解决这个问题，确保字体大小在不同屏幕方向下保持一致。例如，将字体大小设置为vmin，可以...
使用vw适配页面ios中img标签设置宽度无法显示
u014477038的专栏
07-24 877
最近项目全线用了新的vw适配方案，设置了img的宽度，在ios上无法显示图片，google之，找到了解决办法，全局使用img{content:normal!important;}既可解决。 找了一下原因，是因为在content中写了viewport-units-buggyfill来兼容不支持vw的设备，导致这个原因。 那上面的方法就不是最佳解决方案，应该在图片外层套一个div，设置位置跟宽度，...
VW的适配遇到的bug
kunpengyupeng的博客
03-20 365
在初步练习移动端时，在使用VW适配时，遇到了在设计子元素width，height适配VW时没有起作用，这时可以去看Less的插件适配是否有误或去看插件压缩CSS文件中VW的运算有没有结果，没有结果就表示VW的算式没起作用，此时可以将VW的算式用括号括起来。 ...
vue项目使用vw布局及注意点（IOS上图片不显示bug）
jstljspservlet的博客
08-21 919
注意事项 在ios端img标签的图片不显示,安卓可正常显示 解决方案: 不可以为img设置任何css样式，只可以在为img的父盒子设置样式，img的大小靠百分比设置。 代码示例： 错误示例 <div class="img"> <img src="xxx.png" alt=""> </div> <style> .img{ ...
vw, vh视区覆盖和自适应图片
04-12 264
CSS .wrap{width:100vw;height:100vh;background: rgba(0,0,0,0.3);position: fixed;top:0;left:0;text-align: center;} .wrap img{vertical-align: middle;max-height: 90vh;max-width: 90vw;} .wrap:after {...
vw和vh设置宽高
start_sea的博客
07-19 1148
做为一个前端开发者，总有一天我们要设置页面某一部分内容自适应浏览器窗口大小，下面分享下使用vw和vh的设置方式， 一波乱解释： v（即viewport）：可视窗口，也就是浏览器窗口大小. vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% calc() 函数用于动态计算长度值。 用法： height: calc(100vh - 100px); 设置元素的 高度为当前窗口高度 减去100px width：calc(100v
快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)
12-28
在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示   //html <div class=first> //less .container { width: 100vw; ...
皇帝翻牌_皇帝翻牌图片_皇帝翻牌游戏_翻牌游戏_planned6vw_
10-02
"planned6vw"可能是游戏的一个版本号或者是内部开发代号，这通常用于区分游戏的不同迭代或测试阶段。开发者可能会根据这个代号进行bug修复、功能优化或者新增内容，以提升游戏体验。 在实际操作中，玩家还需要掌握...
vh或vw单位
01-28
响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小
详解如何使用image-set适配移动端高清屏图片
01-19
该图片适配方案是基于vw单位适配方案的，具体如何用vw进行适配，网上也很多，出名的就是大漠那篇文章，我也不在这里抄送了。 二、为什么需要适配图片 现在手机机型繁杂，比如iphone的机型一般就是dpr=2的4.7寸屏幕...
vw适配中使用伪类选择器及IOS图片加载不出来
Javon_huang的博客
04-27 386
使用postcss-viewport-units做vw单位转换时遇到以下两个问题： 1、伪类选择器被转换，导致icon的加载不出来 解决办法：设置转换规则 module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini"...
Vh和Vw的简介和使用
tian361zyc的博客
05-23 1万+
Vw和Vh
【移动端布局】抛弃rem，使用vw
热门推荐
04-26 1万+
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹简单介绍下rem布局方案rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-s
CSS3使用vw和vh视口单位实现自适应
weixin_42161488的博客
05-08 670
在移动端中利用rem的相对于根HTML进行改变，通过一段JS实现了移动端自适应，本文则使用纯CSS视口单位来自行自适应，虽然现在的兼容性还没法完全能够接受，但不妨碍你认识这个vw和vh的强大。响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。即使是通过 rem...
vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
weixin_30666401的博客
01-29 647
1、在上篇文章src配置及引入的基础上修改项目配置： 文章链接地址：https://www.cnblogs.com/hsl-shiliang/p/10333022.html。 2、具体配置过程如图： （1）、修改config文件夹下的index.js文件下的build对象下如下（修改 assetsPublicPath:'/' 为 assetsPublicPath:'./'）： （2）、...
vw适配中使用伪类选择器遇到的问题
perry的博客
07-09 4257
在使用vue init webpack构建的项目中，一开始我准备使用rem布局，以前使用rem布局，都采用的是AMFE团队发布的lib-flexible，但是在flexible的redeme的一开始 我就读到了这么一段话，官方指引我使用vw实现适配依据引导，我启用了postcss插件，并且学习到了vw适配，vue构建项目的根目录下的.postcssrc.js文件中的配置如下（摘自https://w...
点阵屏上绘图——基于LCD12864 控制详解
s3c44b0x的专栏
04-25 7487
点阵屏上绘图——基于LCD12864 控制详解 2009年04月10日 星期五 20:02 — 前言 —    前言往往要解释写文章的动机和原因，同时给作者一个正题以外灌水的机会——本文也不例外。 1、为什么我要写这篇文章。 不可否认，我的确受到了Armok的利诱影响，但是最近发生的一些事情却使我觉得写这篇文章是非常有必要的。在OurAV
px、rpx、em、rem、vw、vh各种像素单位的区别
weixin_47340917的博客
01-18 9734
px、rpx、em、rem、vw、vh各种像素单位的区别 px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。 rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。 em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-si
vue中引入图片
weixin_43844975的博客
12-26 733
重点： ~@assets 将图片当成模块引入 背景图片 background-image: url(~@/assets/img/index/list.png); ：src方式 //Vue.js中引入图片路径的方式 html: :src="item.url" js: data(){ return{ twoList: [{ url: require('.....
图片等比缩小 css
最新发布
09-12
3. 使用viewport单位：可以使用`vw`和`vh`等视口单位来设置图片的宽度和高度，这样图片的大小会根据视口的大小进行等比例缩小。同样，使用`max-width`和`max-height`属性来限制最大的宽度和高度。 代码示例： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值