当前位置: 首页 > 知识库问答 >
问题:

前端 - 如何解决设置vw、vh而导致的图片拉伸问题?

公孙成仁
2023-07-16

如题。请大神指点

共有1个答案

黄昊
2023-07-16

1.object-fit

img {  width: 100vw;  height: 100vh;  object-fit: cover;}

2。用背景图片

div {  width: 100vw;  height: 100vh;  background-image: url('your-image.jpg');  background-size: cover;  background-position: center;}
 类似资料:
  • 安卓下目前看没问题 但是在ios下 就上下拉伸 div内部的内容长度是动态长度 求教要怎么在小程序中兼容ios 安卓的展示 图片不变形

  • 我试图使用CSS设置背景图像,但原始图像被拉伸。如何保持原始图像大小,同时设置整个页面的背景? 原始图像为:原始图像 结果是:结果图像 不同的是我的网页背景比原来的要大。 任何帮助都将不胜感激!!!

  • 问题内容: 这是我的CSS脚本 我想把整个细胞伸展 问题答案: .style1 { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgrou

  • 下面的代码,如果 count 连续发生两次变化,那么 loading 的状态就会被错误的提前设置为 false,怎么解决这个问题? 我尝试过把设置 loading 为true 的代码用 setTimeout 包裹起来,这样可以正确设置 loading,但是,当 Promise 立即完成的时候,顺序就又错误了。 然后把这个部分全部放在 settimeout 中才可以,但是这样写也太别扭了 在线测试

  • 问题内容: 我有两个加载同一个类的ClassLoader。因此,显然这些不能互相投射。但是我需要访问在其他ClassLoader中创建的对象。 我可以访问两个ClassLoader。如何在其他课程中使用该对象?我不需要强制转换对象以匹配当前的ClassLoader。 但是问题在于返回的对象的类型为。因此,我必须放弃该对象才能访问某些方法。我怎样才能做到这一点?像下面这样的普通类型转换会导致Clas

  • 本文向大家介绍解决 viewer.js 动态更新图片导致无法预览的问题,包括了解决 viewer.js 动态更新图片导致无法预览的问题的使用技巧和注意事项,需要的朋友参考一下 前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这样就解决了表格中方缩略图