如何根据包含div的大小设置图像的大小？

Question

我的网页上有多个商家信息。清单包含一个图像，它包含DIV的任何大小，宽度和高度，包装图像是固定的。如何在DIV中填充图像。

<div class="image-wrap" style="width:150px;height:150px;">
<img src="some-image.png">
</div>

Answer 1

如果您坚持使用HTML结构作为OP中的位置，并且您对jQuery解决方案持开放态度，则可以使用以下代码：

我在代码中添加了注释以澄清它。

＆＃13;

＆＃13;

$(function() {
  $('div').each(function() {
    var img = $(this).find('img'), /* find the image inside the div */
        imgUrl = img.attr('src'); /* get the image url */
    $(this).css('background-image', 'url('+imgUrl+')'); /* set the background image */
    img.remove(); /* remove the image inside the div */
  });
});

＆＃13;

div {
  border: 1px solid red;
  margin: 1em;
  background-position: 50% 50%; /* center background image */
  background-size: cover; /* make the bg cover the whole element */
}

.div1 {
  width: 250px;
  height: 150px;
}

.div2 {
  width: 250px;
  height: 150px;
}

.div3 {
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <img src="http://via.placeholder.com/350x150">
</div>
<div class="div2">
  <img src="http://via.placeholder.com/250x300">
</div>
<div class="div3">
  <img src="http://via.placeholder.com/350x150">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用bootstrap类来实现此目的。根据你的div大小要求和内部图片标签使用一些col-md-4你可以添加img-responsive类。

另外还有默认的css，如下所示。希望这可以帮助。

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