Question

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

我刚开始使用这个库，我想知道如何在设计中改变我的例子。

中间图像小于其他两个图像。还要保存和高度为三个

代码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>

CODE 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%;
}

CODE 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

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

1 个答案: