专栏首页终身学习者一次解决你的图像尺寸和定位问题。

一次解决你的图像尺寸和定位问题。

作者:Taylor Coon 译者:前端小智 来源:medium

假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端。 但2个月后,他在手机上打开网站,看到他的帅气图像被压成一个小盒子,或者图像被不成比例地压扁,他略微生气跟你(前端)说,给你半天的时间,立马解决。如果解决不了,那在给你半天的时间。

对于刚入门的不久的前端小伙伴可能给他一个礼拜也解决不了,因为要兼容所有的端,这时候他要怎么办呢?这里有一种方案,可以解决所有屏幕大小、所有卡片大小或任何其他用例上的问题,我们来看看这个万能的方法。

默认行为

将图像导入到我们的组件中,然后将其放在页面上,下面是正常默认的情况:

在不同的视口上,图片随着屏幕的变化而变化。在不同的消费设备上有超过10,000种不同的屏幕尺寸。有小到360px宽的手机。有5k台imac,也有 4k电视,这么多尺寸,我们要怎么去适配图片呢?

把外围容器的大小写死怎么样?

我们可以将图片的包裹元素的大小写死,如:

.img-container {
  width: 700px;
  height: 450px;
}

.image{
  width: 100%;
  height: 100%
}

这会比刚开始的好的多了,图像不再随视口的大小进行缩放,视口变大的时候,图片也只显示外围容器设置的大小。 但是,如果视口太小,则会切除图像的底部。

另外,如果用户使用的是大屏幕,则该图像不会自动按比例放大或缩小,因此生成的设计中的图像可能太大或太小。

CSS有一些内置的特性来帮助我们

我们来试试另一种方法。不需要将图像导入到组件中,直接在CSS文件中引用它:

background-image默认情况下不会将图像缩小以适应div大小,因此我们只能看到图像的左上角。

CSS 更多的内置特性

在CSS中, 还有一些 background-image 相关的选项:

background-position: center

告诉浏览器将图像居中放置在div上。

background-size: cover

这告诉浏览器自动将图像缩小以适合div的大小。

假设图片是从后台过来的,那又要怎么做?

如果图片是从远程请求过来的,那我们可以使用内联样式:

这样也能完美用 css 的方法来解决图片定位,大小的问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web 图像技术:前端引入图片的各种方式及其优缺点

    前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是<img>标签,或者是通过CSS background 属性,还可以使用 SVG <image...

    前端小智@大迁世界
  • Web应用程序如何创建 PDF

    在一些场景下,用户都要求一些需要的数据能以 pdf 的格式下载下来。如电子商务商店,经常需要一些报表数据来分析当月的销售情况。

    前端小智@大迁世界
  • 20 个值得学习的 Vue 开源项目

    Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。 因此,时时了解一些新出现...

    前端小智@大迁世界
  • 图像扩张

    机器视觉中的图像识别问题,常常需要大量的数据,而带标签的数据需要人工标注,很难得到较多的数据。因此,我们需要使用图像扩张的方法,人工生成各种变换后的数据,扩大我...

    linxinzhe
  • 学界 | 来认识认识微软的「画家 AI」

    AI 科技评论按:近年来图像生成模型方面的研究可谓是突飞猛进,内容的丰富程度和清晰程度都在不断刷新着以往的记录。终于,微软研究院的这篇新论文突破了另一个瓶颈,能...

    AI科技评论
  • 英伟达、UC伯克利联合研究:条件GAN高分辨率图像合成与语义编辑pix2pixHD(论文+代码)

    来源:arxiv.org 编译:马文 【新智元导读】英伟达和UC Berkeley的研究者最近公开一个名为pix2pixHD的项目,并公开了论文和代码。pix2...

    新智元
  • 英特尔实验室推出半参数图像合成方法,AI造图“以假乱真”

    在古罗马作家普林尼的作品《自然史》中记述了这样一则故事:“公元前五世纪,古希腊画家宙克西斯(Zeuxis)以日常绘画和对光影的利用而闻名。他画了一个小男孩举起葡...

    崔庆才
  • 250,000辆汽车–用于机器学习的十大免费车辆图像和视频数据集

    随着特斯拉自动驾驶汽车的兴起以及谷歌Waymo等项目的兴起,自动驾驶汽车行业似乎每年都在增长。无人驾驶汽车是计算机视觉的一个重要领域,具有众多应用程序,并且具有...

    代码医生工作室
  • 学界 | Ian Goodfellow最新论文:是猫还是狗?不光神经网络识别不了,你也能被忽悠

    大数据文摘
  • 带了个对抗图像块,YOLOv2竟然无法识别我是人……

    如下图所示,左侧没有携带对抗图像块的人可被准确识别出来,而右侧携带对抗图像块的人并未被检测出来。

    机器之心

扫码关注云+社区

领取腾讯云代金券