Question

我遇到了一个无法显示完整背景图片的问题。

代码如下。我认为它可以工作，但它不起作用。仅根据行数显示图像。

请告诉我如何显示完整尺寸的图片。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>test</title>
  <style type="text/css">
    <!-- .tests {
      background: url(contents01_left_bg.png);
      background-position: center top;
      background-attachment: fixed;
      background-repeat: no-repeat;
      -moz-background-size: cover;
      background-size: cover;
    }
    
    -->
  </style>
</head>

<body>
  <div class="tests">
    a</br>
    a
  </div>
</body>

</html>

Answer 1

重新思考你的问题后，我认为最好的方法是不使用背景图片。如果将图像作为常规内容放置到容器中，则该容器将扩展为图像的完整大小。

然后，您可以为其余内容创建另一个容器，并将该内容浮动到图像上。

结果是全尺寸图像，上面有其他内容，您不必担心重复图像或宽高比。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>test</title>
  <style>
  
   #parent { border:1px solid black; }
   .tests {
      float:left;
    }
  </style>
</head>

<body>
  <div id="parent">
    <img src="http://findicons.com/files/icons/963/very_emotional_emoticons/128/128_33.png">
    <div class="tests">
      a<br>
      a
     </div>
  </div>
  <div>
    <p>More content</p>
  </div>
</body>


</html>

Answer 2

如果您正在寻找完整的背景图像，并且元素中可以看到整个图像，则需要使元素与背景图像的宽高比相匹配。否则，元素将与其内部的内容一样高/宽。如果你有图像尺寸，你可以在父元素的伪元素上使用填充或填充来重新创建图像的宽高比，然后div将始终与图像的宽高比相同，显示整个事物而不仅仅是什么适合基于内容。

要重新创建宽高比，请将图像的高度除以宽度（在我的示例中为800/1200），再乘以100得到％（66.6666666666％），并将其应用为padding-bottom父母或父母的伪元素。

body {
  margin: 0;
}

div {
  background: url('http://weknowyourdreams.com/images/monkey/monkey-04.jpg') 0 0 no-repeat / cover;
  height: 0;
  padding-bottom: 66.6667%;
  color: white;
}

<div>
  a<br>
    a
</div>

Answer 3

尝试使用

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

如何显示完整的背景图像文件

3 个答案: