如何创建适应不同尺寸图像的图库？

Question

在此图片中： 在这个链接：

http://www.autofinesse.co.uk/share-n-shine/

有不同大小的图像，css似乎是自动生成的，我希望客户能够上传到wordpress而不必过分担心图像的标准尺寸。此图库完全对齐每个图像，更改行之间的高度，并且不会使它们大小相同。

是否有允许我这样做的图书馆？我能够做到的唯一方法是使用背景定位，这样可以裁剪图像并防止图像尺寸不同。

或者是否有某种javascript算法来解决这个问题？

Answer 1

我可以给你一个css解决方案但是你在WP上为客户说过。

为此，我建议使用像Unite Gallery这样的插件，用于我的WP和Joomla客户端。

这是一个屏幕。它还允许文本叠加，如您发布的图像。

https://wordpress.org/plugins/unite-gallery-lite/

以下是使用flex

的CSS示例

.flex {
  background: #ddd;
  padding: 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-4by3, .flex-3by4, .flex-1by1, .flex-2by1, .flex-1by2, .flex-3by1, .flex-1by3 {
  margin: 1px;
  background-color: #efefef;
  background-size: cover;
  position: relative;
}
.flex-4by3:before, .flex-3by4:before, .flex-1by1:before, .flex-2by1:before, .flex-1by2:before, .flex-3by1:before, .flex-1by3:before {
  content: "";
  display: block;
}

.flex-4by3 {
  flex-grow: 1.33333;
  flex-basis: 266.66667px;
  max-height: 320px;
  max-width: 426.66667px;
  background-image: url("http://lorempixel.com/267/200/food");
}
.flex-4by3:before {
  padding-top: 75%;
}

.flex-3by4 {
  flex-grow: 0.75;
  flex-basis: 150px;
  max-height: 320px;
  max-width: 240px;
  background-image: url("http://lorempixel.com/150/200/food");
}
.flex-3by4:before {
  padding-top: 133.33333%;
}

.flex-1by1 {
  flex-grow: 1;
  flex-basis: 200px;
  max-height: 320px;
  max-width: 320px;
  background-image: url("http://lorempixel.com/200/200/food");
}
.flex-1by1:before {
  padding-top: 100%;
}

.flex-2by1 {
  flex-grow: 2;
  flex-basis: 400px;
  max-height: 320px;
  max-width: 640px;
  background-image: url("http://lorempixel.com/400/200/food");
}
.flex-2by1:before {
  padding-top: 50%;
}

.flex-1by2 {
  flex-grow: 0.5;
  flex-basis: 100px;
  max-height: 320px;
  max-width: 160px;
  background-image: url("http://lorempixel.com/100/200/food");
}
.flex-1by2:before {
  padding-top: 200%;
}

.flex-3by1 {
  flex-grow: 3;
  flex-basis: 600px;
  max-height: 320px;
  max-width: 960px;
  background-image: url("http://lorempixel.com/600/200/food");
}
.flex-3by1:before {
  padding-top: 33.33333%;
}

.flex-1by3 {
  flex-grow: 0.33333;
  flex-basis: 66.66667px;
  max-height: 320px;
  max-width: 106.66667px;
  background-image: url("http://lorempixel.com/67/200/food");
}
.flex-1by3:before {
  padding-top: 300%;
}

<div class="flex">
  <div class="flex-4by3"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
  <div class="flex-1by2"></div>
  <div class="flex-2by1"></div>
  <div class="flex-3by4"></div>
  <div class="flex-3by4"></div>
  <div class="flex-3by4"></div>
  <div class="flex-1by2"></div>
  <div class="flex-3by1"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
  <div class="flex-1by3"></div>
  <div class="flex-4by3"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
  <div class="flex-4by3"></div>
  <div class="flex-2by1"></div>
  <div class="flex-3by4"></div>
  <div class="flex-3by4"></div>
  <div class="flex-1by1"></div>
  <div class="flex-2by1"></div>
</div>

Answer 2

<强> HTML

<div>
    <img src="http://imgur.com/kj4qwHl.jpg">
    <img src="http://imgur.com/q6pFhhE.jpg">
    <img src="http://imgur.com/ngdnoYI.jpg">
    <img src="http://imgur.com/FkrSS5O.jpg">
    <img src="http://imgur.com/ux0Om6X.jpg">
    <img src="http://imgur.com/2ProEc9.jpg">
    <img src="http://imgur.com/iu39yRs.jpg">
    <img src="http://imgur.com/gx0iOdT.jpg">
    <img src="http://imgur.com/6kEuRYX.jpg">
</div>

CSS（SASS）

@mixin rspv($w) {
  @media screen and (max-width:$w) {
    @if $w==680px {
      img:nth-child(n1) {
        width:100%;
      }
    } @else {
      @content;
    }
  }
}
@mixin grid($pc...) {
  $len:length($pc);
  img {
    vertical-align:top;
    transition:all 0.5s;
    @for $i from 1 through $len {
      &:nth-child(#{$i}) {
        width: nth($pc,$i)+'%';
      } 
    }  
  }
}
div {
  margin:0 auto;
  padding:0 100px;
  +grid(26,40.7,33.3,41.9,26.7,31.4,29,38.5,32.5);
  @include rspv(860px) {
    +grid(39,61,45,55,46,54,42.9,57.1,100);
  }
  +rspv(680px);
}

的说明

在rspv mixin（响应式）中，它检查宽度是否符合680px，然后(even)和(odd)图片将具有完整尺寸。如果没有，mixin grid将会发挥作用。

除了普通属性：值对，grid从给定参数$pc（百分比）获取宽度，并在for循环中使用它。它将根据$i的长度迭代$pc并返回$pc地图中的每个值。

由于所有图像都在div内，因此所有混音都将包含在其中。第一个grid不需要响应式需求，第二个需要，而最后一个+rspv(680px)不需要宽度计算。

这应该与你的汽车链接有关。代码不多。我建议，获取CSS的预编译器。如果没有它，那将会有更多的代码和更难以制定计划。

DEMO HERE