CSS:自动计算元素高度以匹配背景图像

文章/答案/技术大牛

发布

1回答

html、css、background-image、responsive-images

我想我的网站(横幅)的一部分，以适合所有宽度的图像，并为图像保持完整的宽度(不是像素宽度，但在百分比)在任何时候。我不关心的高度太低，我需要的图像总是显示所有的宽度内容和高度是自动的。我使用的是background-size: contain，它保持了图像的全宽，但需要计算高度，因为这样容器的高度就会高于图像的高度。<body> <sec

浏览 11提问于2017-07-28得票数 0

回答已采纳

2回答

调整宽宽比的div以适应内容css图像

javascript、jquery、css

你好，我有一个div，作为背景，我有一个宽192 an和高度1200 an的图像。divs有100%的宽度和window.innerHeight的文件就绪；背景css图像具有折叠规则：background-size: 100% auto !我想要做的是基于window.resize计算div元素的新高度，并将其设置为与背景图像css高度相匹配。

浏览 5提问于2013-11-12得票数 0

回答已采纳

2回答

导航链接背景图像

html、css

我试图在导航链接后面显示一个背景图像，但它并没有完全显示--这是代码： background-image: url(sidebar.png); background-repeat

浏览 7提问于2013-08-07得票数 0

回答已采纳

2回答

使HTML5视频适应父元素大小

javascript、css、html、video

我在a中有一个元素，当页面上的其他元素被动态调整大小/添加/删除时，它会自动调整大小。我希望视频元素也自动调整大小，以便它始终包含在它的背景div中；如果我将视频元素的CSS高度和宽度设置为100%，这类工作，因此它总是与它的容器相同的大小。然而，如果包含div的尺寸低于视频图像的固有videoWidth或videoHeight，那么它的行为就好像CSS height/

浏览 0提问于2011-11-12得票数 5

5回答

重复背景图像被切断

html、css

我有一个容器DIV，它的尺寸与它的高度有关。它有一个背景图像，向下重复制作一个模式。有办法告诉背景图像不要被切断吗？谢谢

浏览 3提问于2012-07-09得票数 4

回答已采纳

2回答

我从MDN中引用了，但不明白为什么当CSS body { width: 800px; height: 800px; }被注释掉时，下面的代码段不显示iPhone图像(当给出显式的宽度/高度值时，它会像预期的那样工作应用body { width: 100%; height: 100%; }或body { width: auto; height: auto; }时，图像既不显示也不显示。我希望iPhone图像尽可能大，不需要任何农作物，我认为这与关于background-size: contain的

浏览 19提问于2022-04-22得票数 0

回答已采纳

1回答

动态元素高度与背景覆盖尺寸匹配

html、css、background-image

我使用以下CSS在元素上设置封面背景图像： background: url(images/kitteh1.jpg) no-repeat; background-position: center;} 什么是正确的，CSS-唯一的方式，使元素大小与背景图像完全匹配，这样的图像首先占100%

浏览 2提问于2015-03-16得票数 0

回答已采纳

2回答

在HTML5和css中调整图像大小并剪切图像

html、css、responsive-design、resize-crop

我的要求- 然而，我觉得我这样做很乏味，而且在CSS和/或jQuery中有一些非常简单的东西。你能帮我使用纯css (最好)吗？

浏览 2提问于2013-12-19得票数 4

回答已采纳

3回答

如何在框中定位图像，使其在宽度或高度上恰到好处，以较小者为准？

html、css、image-scaling

我想从服务器加载一些照片，并显示在一个自己的框中，这样框是填充的，图像居中(而不是拉伸)，如果它太大的话。例如，我可以在不知道每个图像大小的情况下使用CSS实现这一点吗？

浏览 0提问于2012-04-11得票数 5

回答已采纳

1回答

计算Javascript中背景图像段的边界。

javascript、css、background-image

是否有一种方法可以计算背景图像段(例如，图像白色背景上的红色圆圈)的矩形边界，它是按背景大小缩放的:盖子，即使它有一个负值并且在移动设备视图之外？另一种解决方案是将x/y坐标固定在背景图像位置上。 .background{ width: 100%; background: url你必须缩放浏览器才能

浏览 3提问于2016-12-15得票数 0

回答已采纳

3回答

CSS:如何将容器大小设置为背景图像大小

css

我知道如何拉伸背景图像以适应它的容器(带有background-size属性)。但是如何在不手动设置宽度和高度的情况下实现另一种方式呢？为了更好地说明我的观点，假设我们有一个带有一行文本的p元素，并将其背景图像设置为800*600 we的图片。如何将p 的宽度和高度自动调整为800*600？每当我在Photoshop中更改图像大小时，更改CSS中的宽度和高度都是很烦人的。工作流程如

浏览 4提问于2013-04-12得票数 8

回答已采纳

1回答

css背景图像，自动缩放和裁剪填充屏幕。

css、background

是否有CSS规则可以自动缩放图像并裁剪图像以填充整个容器？现在，我正在使用javascript进

浏览 1提问于2013-07-24得票数 0

回答已采纳

2回答

隐藏div也会隐藏父div的图像

javascript、jquery、html、css

当我隐藏chooseArena时，它也会隐藏较大的div的图像。我该怎么做才能只隐藏较小的div，而不隐藏较大的div的图像。这是我的html jquery<head> <link rel="stylesheet" type="text/css" href="style.css"> <sc

浏览 17提问于2017-01-21得票数 0

回答已采纳

3回答

在css中声明带有"height: auto“的”背景图像“时，图像不会显示

css

width: 200px; background-repeat : no-repeat;} 这不是在显示图像但是，如果我们将高度选项更改为某个正在工作的值，是否有人可以帮助我解决此问题。

浏览 0提问于2012-12-12得票数 4

回答已采纳

1回答

不同浏览器和设备上的HTML呈现方式不同

javascript、jquery、html、css、facebook

2)页面的高度取决于背景的高度，而不管页面上的元素是什么。高度是根据背景图像的宽度计算的，以保持方面ratio.Elements需要准确地放置在任何需要的背景上。(高度是自动确定的，以保持背景图像的高宽比。)因此，为了使页面响应(元素根据高度和宽度调整)，我使用了百分比系统。这是所有问题开始的

浏览 2提问于2013-08-27得票数 0

1回答

目标: PHP设置对象类，CSS基于类显示图像，使图像可链接。不工作

php、jquery、css

首先，我让php生成一个表，然后，当涉及到箭头图像时，我希望php根据条件将一个特定的类分配给对象。目标是在不同的条件下获得不同的可链接图像。 </a>a.new_upArrow{} 只有当我在php脚本中添加文本< a&g

浏览 1提问于2011-05-17得票数 4

回答已采纳

2回答

将HTML元素放置在具有动态大小的图像上

html、css、image、responsive-design、scaling

我添加了HTML元素和CSS，这样将出现三个选择框，并将图像上的框重叠。它们是使用像素值定位的。如果用户的设备宽度低于某一阈值，则页面将加载此图像并将其放置在中间。如果设备宽度小于图像，则图像应缩放以适合，选择框也应缩放以重叠图像。最后这部分我有麻烦了。根据我到目前为止的调查结果，有两个相反的CSS</

浏览 4提问于2016-12-19得票数 0

回答已采纳

3回答

如何让背景图片占据整个页面？

javascript、html、css

页面的背景反映了天气描述，例如:多云、下雨、刮风等。我有几张图片，但没有一张不重复地全屏显示。我知道如何将其设置为无重复；但是，如果图像分辨率没有桌面大小那么大，它将无法填满整个屏幕。是否可以将背景图像设置为填充/拉伸屏幕。我根据天气描述通过jquery/javascript设置背景图像。"stars"]; // setting background depending on weat

浏览 0提问于2017-06-30得票数 0

1回答

保持div在%中的纵横比，知道px中的高度和宽度

javascript、math

我给一个div添加了一个背景图像。</div>} 我试图计算js中的高度，以保持图像的高宽比。如果我知道px中原始图像的宽度和宽度，如何在CSS中设置正确的高度

浏览 0提问于2018-10-07得票数 0

回答已采纳

2回答

如何使图像延伸到特定段落？

html、css、image、user-interface、height

这是迪夫 display:inline-block; width:70%; }#laptop {height:3%;}

浏览 4提问于2015-05-07得票数 1

回答已采纳

点击加载更多