个人中心
gpt4 book ai didi

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

转载 作者：bug小助手 更新时间：2023-10-25 20:05:24 25 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 { background：url（yourimage.png）无重复中心中心固定; background-size：auto; background-size：100%; aspect-ratio：1/1; }

25 4 0
文章推荐： pros and cons of high php session.sid_bits_per_character and session.sid_length? [closed](高php session.sid_bits_per_character和session.sid_length的优点和缺点？[关闭])
文章推荐： VSCode Debugger Launch doesn't work on arch firefox(VSCode调试器启动在ARCH Firefox上不起作用)
文章推荐： Why are these tsconfig paths not working?(为什么这些tsconfig路径不起作用？)
文章推荐： Cannot upload data to Dropbox with react-native-blob-util(无法使用REACT-Native-BLOB-Util将数据上载到Dropbox)
bug小助手
个人简介

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

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