为什么物体不适合宽度或高度？

Question

我在100 * 300px div中有一个240 * 240像素的图像（演示值，实际值有所不同，未知）。我使用object-fit: contain使图像在div内部完全可见，并保持其纵横比。问题是object-fit没有修改图像的宽度，导致一个奇怪的“填充”（可以这么说）。

如何使图像只占用所需的宽度，而不是采用原始宽度？

演示：http://codepen.io/alexandernst/pen/ONvqzN

.wrapper {
  height: 100px;
  width: 300px;
  border: 1px solid black;
}
.flex {
  display: flex;
}
img {
  object-fit: contain;
}

<div class="flex wrapper">
  <img src="https://unsplash.it/240/240" />
</div>

Answer 1

<?php echo '<div id="iframecontainer"><iframe name="meeting-iframe" frameborder="0" style="width:80%;height:80%" src="' . $link . '"></iframe></div>'; ?> <script> (function ($) { $(document).ready(function() { // Variables from php var event_id = '<?php echo $event_id; ?>'; var user_id = '<?php echo $current_user->uid; ?>'; ////////////////////////////////////////////////////////////////////// // Run function before window is closed,doesn't work as expected in FF window.addEventListener("beforeunload", function (e) { var e = e || window.event; var message = 'Are you sure you want to leave the meeting?'; if(e) { e.returnValue = message; } // Post to get meeting info $.post('/easymeet/getInfo/' + event_id).done(function(meetResponse) { //ajax callback ,I have hidden the code here as I don't think its relevent to the question }); }); }); }(jQuery)) 属性通常与object-fit，width，height和max-width一起使用。例如：

＆＃13;

＆＃13;

max-height

＆＃13;

.wrapper {
  height: 100px;
  width: 300px;
  border: 1px solid black;
}
.flex {
  display: flex;
}
img {
  object-fit: contain;
  height: 100%;
  width: auto;
}

＆＃13;

＆＃13;

＆＃13;

事实上，即使没有<div class="flex wrapper"> <img src="https://unsplash.it/240/240" /> </div>，它也能正常工作，请参阅此jsFiddle。

Answer 2

＆＃13;

＆＃13;

.wrapper {
  height: auto;
  width: 100%;
  border: 1px solid black;
  background-image: url(https://unsplash.it/240/240);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.flex {
  display: flex;
}

img {
  object-fit: contain;
}

＆＃13;

<div class="flex wrapper">
  <img src="https://unsplash.it/240/240" />
</div>

＆＃13;

＆＃13;

＆＃13;