Question

我需要将图像设置为div的背景，但我还没有找到一种方法，如果不设置div的精确高度（以像素为单位）。我希望div始终是图片的大小，当分辨率较小时，调整分辨率。我不想用像素和@media来做，必须有一种更简单的方法。

HTML

<div class="foo">
</div>

CSS

.foo{
height: "exact height of picture of bg";   !!!
background: url("./foo/bar.jpg") 0 0 no-repeat black;
}

任何想法？

感谢

Answer 1

<img src="yourpicture.jpg"/>

多数民众赞成。

Answer 2

UPDATE - 使用JS获取图像大小的解决方案这将获得图像大小，然后您可以使用JS设置要显示图像的区域的宽度和高度我已经评论了代码来解释发生了什么

'use strict';

// wait for the document to be ready then run our task
// we're outputting to a div so need to wait for div to be available
window.onload = runTask();

function runTask() {
    // get the div that you want to output to
    const output = document.getElementById('output');

  // image to measure, example using a wikimedia image
  let image = new Image();
  image.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/768px-JavaScript-logo.png';

  // output image dimensions, again have to wait for image to load
  // thanks to David Walsh blog for this info
  // https://davidwalsh.name/get-image-dimensions
  image.onload = function() {
    output.innerHTML = "Image width: " + image.naturalWidth + "<br />Image Height: " + image.naturalHeight;
  };
};

要查看此代码，请执行 - https://jsfiddle.net/2L521dk5/27/

ORIGINAL

您是否愿意使用JavaScript？您可以检测图像大小并相应地缩放div 此外，它必须是背景图像吗？

Answer 3

如果您在调整div的大小时尝试使背景图像响应，最好的方法是将div的背景大小设置为：

background-size:100% 100%;

通过这种方式，您仍可以将内容放在<div>背景图片上，就像您尝试的那样。你不能用<img>元素

来做到这一点

Answer 4

请勿在CSS上使用“”作为网址。

.foo {
     background-size: cover;
     background-repeat: no-repeat;
     background: url(http://s3.amazonaws.com/libapps/accounts/27060/images/example.png);
}

<div class="foo">
text<br>text<br>text
</div>

将图像设置为<div>的背景，不带像素

4 个答案: