小 div 内的大图像，没有裁剪或更改纵横比答案

【问题标题】：Large image inside small div with no cropping or change in aspect ratio小 div 内的大图像，没有裁剪或更改纵横比
【发布时间】：2017-06-23 02:27:47
【问题描述】：

我有一个 30% 宽的 div 并包含背景图片。图像本身约为 500 像素 x 300 像素。当浏览器足够宽以至于 30% 宽的 div 大约为 500px 时，整个图像可以很好地显示，没有裁剪或拉伸。但是当视口很窄并且 div 缩小到 300px 时，500px 的图像就会被裁剪。有没有办法拍摄大图像并将其强制放入较小的容器中，而不会裁剪并且不会丢失纵横比？如果不是，那么在我切换图像的媒体查询断点之间保持图像填充 div 而不裁剪或丢失纵横比的正确方法是什么？

【问题讨论】：

图片没有 100% 填满父元素你还好吗？因为这似乎是满足给定要求的唯一选择。
在img元素的style属性中设置宽度为100% - <img src='image.png' style='width:100%' />
我实际上希望大图像能够 100% 填满包含它的较小 div。我只是不希望图像被截断/裁剪。这是一个图表的图像，如果只显示 1/2 的图像会看起来很奇怪，因为 div 太小而无法容纳整个东西。
我使用的是带有背景图像的 div，而不是
@johnsontroye 你真的应该有一个Minimal, Complete and Verifiable Example。这将使事情更容易理解并提供答案。目前听起来你需要使用background-size: contain;。

标签： css image background-image

【解决方案1】：

如果您使用img 元素，这已经得到解答： Is there an equivalent to background-size: cover and contain for image elements?

但如果你想坚持 CSS 并使用 background-image:url('...'); 只需将background-size 设置为background-size: contain;。

【讨论】：

我使用的是带有背景图像的 div，而不是
@johnsontroye 您没有阅读答案吗？ This JSFiddle 是 Christian4423 指示您执行的操作的示例。 This JSFiddle 是其他人建议使用 <img> 的一个示例。这达到了相同的结果。您可以通过拖动垂直分隔线来调整小提琴的视口大小。

【解决方案2】：

也许有更好的方法可以做到这一点，但这是我通常开始的方式。

具有固定尺寸的父 div。然后，我将图像添加为子 div 的 background 到父 div 中。

图像始终会调整并适合父 div。

.my-image-parent {
  display: inline-block;
  width: 300px;
  height: 300px;
  background: #131418; /* for demo only */
  line-height: 300px; /* should match your div height */
  text-align: center;
  font-size: 0;
}


/* demonstration backgrounds */
.bg1 {background: url(https://unsplash.it/300/300);}
.bg2 {background: url(https://unsplash.it/800/800);}
.bg3 {background: url(https://unsplash.it/1920/1080);}
.bg4 {background: url(https://unsplash.it/760/1240);}

.my-image {
  width: auto;
  height: 100%;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="my-image-parent">
  <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
  <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
  <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
  <div class="my-image bg4"></div>
</div>

【讨论】：