个人中心
gpt4 book ai didi

Image is not showing in full background(图像未以全背景显示)

转载 作者：bug小助手 更新时间：2023-10-25 20:08:19 30 4
gpt4 key购买 nike



I want to place an image as background to a div. The image size is 5568x3712 but still the background-size:contain is not placing the whole image as background.See the below screenshot:
enter image description here

我想放置一个图像作为背景的div。图像大小为5568x3712，但背景大小：Container仍未放置整个图像作为背景。请参见以下屏幕截图：


The image is not covering the right side of the div. Below is my CSS code:

图像没有覆盖div的右侧。以下是我的css代码：


.heroSection{
  background-image: url('../../public/hero-section.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgb(148, 145, 145);
  background-blend-mode: multiply;
  flex-grow: 1;
}

I don't know why it's not covering the whole div. I searched for a solution but nothing worked. Does anyone have idea what I am doing wrong here?

我不知道为什么它没有覆盖整个div。我寻找了一个解决方案，但没有奏效。有人知道我做错了什么吗？


Thanks in advance.

先谢谢你。


更多回答

Maybe use background-size: cover if you want it to cover, you know. And have a look at the web docs at least: developer.mozilla.org/en-US/docs/Web/CSS/background-size

可以使用背景大小：如果你想盖住它，你知道的。至少看看网络文档：developer.mozilla.org/en-US/docs/Web/CSS/background-size

first, try to find the solutions If you can't then ask to SO community, this is not the proper way to use SO.

首先，试着找到解决方案，如果你不能，然后问社区，这不是正确的使用方式。

You can change the aspect ratio of the background image by specifying the size with CSS "background-size: <width> <height>"

您可以通过使用css指定大小来更改背景图片的纵横比。

You can't have the image cover the whole div and not be cropped, you cannot fit a rectangle into a square and not crop the rectangle!

你不能让图像覆盖整个div而不被裁剪，你不能将一个矩形装入正方形而不裁剪该矩形！

优秀答案推荐

It is expected. You may reference the MDN document about different background-size.

这是意料之中的。您可以参考不同背景大小的MDN文档。


If you want the image to cover the whole HTML div, you can use "background-size: cover" instead. The down side is that unless the div is exactly the same size as the div, part of the image will be outside of the div.

如果你想让图片覆盖整个HTMLdiv，你可以改用“Backging-Size：Cover”。缺点是，除非div与div的大小完全相同，否则图像的一部分将位于div之外。


contain
enter image description here

包含


cover
enter image description here

盖子


If you simply want the image to cover your whole element but you're not concern about distortion, you may choose to use background-size: 100% 100%.

如果你只是想让图像覆盖你的整个元素，但你不担心失真，你可以选择使用背景大小：100%100%。


background-size: 100% 100%.
enter image description here

背景尺寸：100%100%。


If you are concern about the image distortion while still want the image to cover the whole div, you need to change your div's size to fit the image's aspect ratio.

如果您担心图像失真，但仍希望图像覆盖整个div，则需要更改div的大小以适应图像的纵横比。


Given that your div fills 100% of the screen width and your image is 5568 x 3712, you may set the div to fixed height 66.6667% of view width

假设您的div占屏幕宽度的66.6667，而您的图像是5568x3712，您可以将div设置为视图宽度的66.6667%的固定高度


<style>
.my-background {
  height: 66.6667vw;
  background-image: url('../../public/hero-section.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  ...
  ...
}
</style>
<div class="my-background"></div>


Try this:

试试这个：


yourelement{
background: url(yourimage.jpg) no-repeat center center fixed;
    background-size: cover; 
}

更多回答

The cover fits the image but also crops the extra image. I don't want my image to be cropped.

封面适合图片，但也裁剪了额外的图片。我不想让我的形象被剪掉。

As I described in the answer, this is expected. Logically speaking, if the div has a different aspect ratio than the background image, either you cut the image (cover), or it just fit the inner bound to show the whole image (contain), or you need to distort the image. Which do you prefer?

正如我在答案中所描述的，这是意料之中的。从逻辑上讲，如果div的纵横比与背景图像不同，要么剪切图像(封面)，要么只适合显示整个图像的内界(包含)，或者需要扭曲图像。您喜欢哪一种？

The cover fits the image but also crops the extra image. I don't want my image to be cropped.

封面适合图片，但也裁剪了额外的图片。我不想让我的形象被剪掉。

There then? yourelement { background: url(yourimage.png) no-repeat center center fixed; background-size: auto; background-size: 100%; aspect-ratio: 1/1; }

那么就在那里？Yourelement{背景：URL(yourimage.png)无重复居中固定；背景大小：自动；背景大小：100%；长宽比：1/1；}

30 4 0
文章推荐： How can I vertically align different height text using flexbox in Tailwind?(如何使用TailWind中的Flexbox垂直对齐不同高度的文本？)
文章推荐： Copy file from source directory to binary directory using CMake(使用CMake将文件从源目录复制到二进制目录)
文章推荐： How to complete barplot bars to 100% with a distinct style?(如何将条形图条形图做到100%，风格鲜明？)
文章推荐： .NET 7 C# worker application logging to Elasticsearch using serilog(使用Serilog登录到Elasticearch的.NET 7 C#工作应用程序)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com