相关疑难解决方法(0)

我在下面的div中有一个背景图像,但图像被切断了:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有没有办法显示背景图像而不切断它？

当我给图像一个百分比的宽度或高度时,它只会增长/缩小保持其纵横比,但如果我想要与另一个元素相同的效果,是否可以使用百分比将宽度和高度联系在一起？

我正在使用bootstrap jumbotron,并包括背景图片.调整屏幕大小使图像平铺并重复,而我希望响应地调整图像大小.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

您将如何使图像响应？该网站在这里.谢谢你的想法!

众所周知,使用max-height和max-width可以使图像自动适合div,如下所示:

.cover img {
    max-width: 100%;
    max-height: 100%;
}

有没有办法制作一个半透明的封面(通过设置opacity: 0.8为div),恰好适合图像的大小而不通过javascript获得宽度和高度？

以下是我在jsfiddle的尝试.我只能覆盖整个容器,但我想要的只是覆盖图像.图像的大小是可变的,因为它们将由用户上载. https://jsfiddle.net/muorou0c/1/

我想实现以下目标:

哪里有背景图像,上面有文字(文字位置为bootstrap offset-6 col-6)

并为它提供响应.

问题是,与传统背景不同,我确实关心背景图像是如何截断的,无论宽度如何,我都需要手机可见.

我试过了: background: url(background-photo.jpg) center center cover no-repeat fixed;

img关于如何让div高度自动调整到背景大小的隐形技巧？

在所有情况下,手机都会被截断

将不胜感激

编辑:
根据要求 - 原始div结构是:

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

但我把它改成任何有效的东西都没有问题......

在Div上使用背景图像时,我无法显示图像的完整高度,无法使用height:auto;或height: 100%.为什么这样？我该如何解决这个问题？

我在这里创建了一个JS小提琴:https://jsfiddle.net/2d0npz2v/5/

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: 100% auto;
  height: 100%;
}

<div class="imageContainer2"></div>

更新 为了清晰起见,图像需要100%宽度和自动高度(不在底部切割).此示例有效,但它使用"content"属性而不是"background-image": https: //jsfiddle.net/j47a6x7s/.我正在寻找相同的行为,但没有使用内容.

我有一个父母div和两个孩子.我希望孩子的身高保持在父母身高的75%和25%不变.

我遇到的问题是我需要父级通过背景图像设置高度.也就是说,它应该相应地缩小,但总是呈现图像的相同区域.

这是一个行为图:

儿童A包含文字.说实话,只要文本显示,我就不在乎孩子A的高度.我需要孩子B来保持它的高度作为父母的比例及其在父母div底部的位置.

我想知道是否有一个合理的纯css解决方案来解决这个问题.

我的页面上有以下div:

<div id="logo">
</div>

我想在这个div中放一个背景图片:

#logo {
    background: url('logo3_light.jpg') no-repeat;
    width: 100%;
    height: auto;
}

但是图像永远不会出现,因为div的高度是0px.

我想以某种方式将包装div的高度设置为缩放图像的高度.可能吗？

我知道有类似的问题，但没有一个对我有用。

我有一个带有背景图像的 div 类：

    #index-box{
        border-radius: 20px;
        background: url('/static/images/bg.png') no-repeat;
        background-size: cover;
    }

有没有办法让#index-boxdiv 等级如此之高，以至于整个背景图像都适合？