时间戳

首页 > 解决方案 > 将图像缩放到容器

html - 将图像缩放到容器

问题描述

我有两个div。一个图像容器，颜色为蓝色。另一个保存带有背景的图像和远程图像。当我缩放浏览器窗口时，我想让图像覆盖整个容器 div，这样在图像不按比例缩放的情况下看不到蓝色，但是容器在 1600px 宽处停止并且在该点处也停止高度. 如有必要，容器将能够根据图像缩放高度。

  <div style="width:100%; background-color:rgba(52,46,132,1.00); height:200px">	
<div style="background-image: url('https://tcokchallenge.com/launch2/media/slides/488835087.jpg?1111926855'); width:100%; height: 100%; background-size: cover"> 
</div>	
</div>

标签： htmlcss

解决方案

我赶紧把它放在一起。

 <div class="container image"></div>

css 文件

.container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.image{
  background-image: url('https://tcokchallenge.com/launch2/media/slides/488835087.jpg?1111926855');
  width: 100%; height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

也许它会帮助你。

在 JSFiddle 上查看结果

推荐阅读