javascript - 如何使图像宽度变小？石工

Question

基本上不知道如何改变图像的宽度，使其看起来像设计。

我是这个库的新手，我想知道如何将我的示例更改为设计中的样子。

中间的图像比其他两个小。还要保留和高度一样的三者

我有这个sample

代码 HTML:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item item-1">
    <img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-01.png" />
  </div>
  <div class="grid-item item-2">
    <img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-02.png" />
  </div>
  <div class="grid-item item-3">
    <img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-03.png" />
  </div>

</div>

代码 CSS:

* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */
.item-1,.item-3{
  width:40%;
}
.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  width: 100%;
}

代码 JS:

// external js: masonry.pkgd.js, imagesloaded.pkgd.js

// init Masonry after all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
  }); 
});

And here is the image

提前致谢!

Answer 1

这些 css 声明中的小改动将解决问题

.grid-item {
  width: 33.333%;
  height: 200px; // Added height
}

.grid-item {} // No need of float left

.grid-item img {
  min-width: 100%; //defined max-height,max-width & min-height
  max-width: 100%;
  max-height: 100%;
}

检查这个codepen