带有 div 和 css 的响应式图片（无 img 标签）

Question

我有这样的代码：

<div class="wrap">

</div>

.wrap {
background-image: url("woody.jpg");
background-size: cover;
display: block;
min-height: 300px;
height: auto;
padding: 0px;
position: relative;
width: 100%;
}

此代码有效，但会裁剪图像。我不想要这个。我想用纯 css.

显示完整的高度和宽度

(宽高不固定，宽度根据父级，高度根据当前宽度填满)

我也不想使用像 this 这样的 img 标签。

可能吗？

Answer 1

这将有助于 you.but 我们不知道您的确切尺寸是多少 want.so 您必须在代码中将 div 的尺寸更改为 [=22] =] 并设置您的图像 url 或 path。根据需要更改 div 的 width 和 height 的 value。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image</title>
<style>
  body{
    padding: 0;
    margin:0;
  }

  div.imageContainer
  {
    width: 40%;
    height: 40%;
  }

  div.imageContainer img{
    width: 100%;
    height: 100%;
    box-shadow: 1px 2px 1px black;
    margin: 2%;
  }

</style>
</head>

<body>

 <div class="imageContainer">
   <img src="your image url or path">
 </div>


</body>
</html>

Answer 2

background-size: contain;

background-size: contain; 不会裁剪，所以显示全图，适应div尺寸

https://drafts.csswg.org/css-backgrounds-3/#the-background-size and https://developer.mozilla.org/en-US/docs/Web/CSS/background-size 了解更多信息。

带有 div 和 css 的响应式图片（无 img 标签）

responsive image with div and css (no img tag)

html

css

response