CSS图像缩放到填充？ [英] CSS Image zoom-to-fill?
本文介绍了CSS图像缩放到填充？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个网站，上面有完整的视窗图片，如
背景图像占据了导航栏下的整个容器。
我想让它在移动设备上，当我查看图像时，它会被放大/居中，这样图像就不会扭曲，而且我仍然可以看到其中的一些作为背景...我可能没有正确地解释它，我对设计不是很流利，但我认为这个样机不言而喻
红色表示原始图像边界，蓝色表示移动视区。我希望图像在移动设备上被裁剪/缩放。如何使用css来实现这一点？谢谢
编辑：为了澄清我尝试过的内容，我不相信我可以使用background-size: cover和background-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。
* { 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图像缩放到填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
