CSS图像缩放到填充?

CSS Image zoom-to-fill?(CSS图像缩放到填充?)

本文介绍了CSS图像缩放到填充?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个网站,上面有完整的视窗图片,如

背景图像占据了导航栏下的整个容器。

我想让它在移动设备上,当我查看图像时,它会被放大/居中,这样图像就不会扭曲,而且我仍然可以看到其中的一些作为背景...我可能没有正确地解释它,我对设计不是很流利,但我认为这个样机不言而喻

红色表示原始图像边界,蓝色表示移动视区。我希望图像在移动设备上被裁剪/缩放。如何使用css来实现这一点?谢谢

编辑:为了澄清我尝试过的内容,我不相信我可以使用background-size: coverbackground-position: center。我目前的设置是使用Reaction Bootstrap Carousel。Carousel组件采用<img>属性,因此我正在尝试修改图像的样式。根据我所阅读的内容,Backback-Size/Position属性仅适用于<html>标记的样式,根据我尝试此建议的经验,它不起作用。

例如,在我的homepage.scss中,我有以下

.fullImage {
    background-position: center;
    background-size: cover;
}

并将其应用于旋转木马中的图像

<Carousel.Item interval={5000}>
  <img
    className="fullImage"
    src="/images/home/banner/img1.jpg"
  />
</Carousel.Item>

只有在Mobile上的效果看起来像这样:

其中预期效果应该类似于中间图像,其中图像实际上不能滚动到视区之外,而是具有固定大小,并在较小屏幕上放大了视图。

推荐答案

如果您确实需要保留img元素(没有背景图像),我会选择object-fit: cover。此解决方案仅适用于modern browsers。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
* { margin: 0; } /* just some reset */
.header { height: 100vh; width: 100vw; overflow: hidden; }
img { width: 100%; height: 100%; object-fit: cover; }
<div class="header">
  <img src="https://picsum.photos/1920/1080"/>
</div>

但是,理想情况下,我会选择src-sets,并将移动设备的图像替换为裁剪后的图像,这样它就不会加载不必要的大容量。

这篇关于CSS图像缩放到填充?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS图像缩放到填充?

基础教程推荐