Question

我正在创建包含许多图像的画廊，但是以不同的尺寸查看图像，它们看起来并不吸引人。我尝试将高度更改为100px，但所有图像均重叠。我希望将不同尺寸的图像视为相同尺寸并保持其响应性。如何使它们具有响应性和相同尺寸？

/*
var importantStuff = window.open('', '_blank');
importantStuff.document.write('Loading preview...');
importantStuff.location.href = 'index.html';
*/

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

.main {
  max-width: 1000px;
  margin: auto;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  background-color: white;
}

* {
  box-sizing: border-box;
}

.responsive {
  float: left;
  width: 50%;
  padding: 5px;
}

@media screen and (max-width: 600px) {
  .responsive {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

<div class="main">
  <h1>Image Compression</h1>
  <hr>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="1.png">
        <img src="1.png" width="600" height="400">
      </a>
      <div class="desc">
        <h3>Image:1</h3>
      </div>
    </div>
  </div>


  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="2.png">
        <img src="2.png" width="600" height="400">
      </a>
      <div class="desc">
        <h3>Image:2</h3>
      </div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="3.png">
        <img src="3.png" width="600" height="400">
      </a>
      <div class="desc">
        <h3>Image:3</h3>
      </div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="4.png">
        <img src="4.png" width="600" height="400">
      </a>
      <div class="desc">
        <h3>Image:4</h3>
      </div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="5.png">
        <img src="5.png" width="600" height="400">
      </a>
      <div class="desc">
        <h3>Image:5</h3>
      </div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="6.png">
        <img src="6.png" width="600" height="400">
      </a>
      <div class="desc">
        <h3>Image:6</h3>
      </div>
    </div>
  </div>
</div>

Answer 1

一个建议是限制img大小，并在其周围加上a-tag。在我的示例中检查对a-和img标签的更改：

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}
.main {
  max-width: 1000px;
  margin: auto;
}
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery a {
  display: block;
  width: 100%;
  overflow: hidden;
  height: 100px;
}

div.gallery img {
  min-width: 100%;
}

div.desc {
  padding: 15px;
  text-align: center;
  background-color: white;
}

* {
  box-sizing: border-box;
}

.responsive {

  float: left;
  width: 50%;
  padding: 5px;
}

@media screen and (max-width: 600px) {
  .responsive {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

<div class="main">
  <h1>Image Compression</h1>
  <hr>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="1.png">
        <img src="https://placehold.it/200x150">
      </a>
      <div class="desc"><h3>Image:1</h3></div>
    </div>
  </div>


  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="2.png">
        <img src="https://placehold.it/200x100">
      </a>
      <div class="desc"><h3>Image:2</h3></div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="3.png">
        <img src="https://placehold.it/150x200">
      </a>
      <div class="desc"><h3>Image:3</h3></div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="4.png">
        <img src="https://placehold.it/200x300">
      </a>
      <div class="desc"><h3>Image:4</h3></div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="5.png">
        <img src="https://placehold.it/150x150">
      </a>
      <div class="desc"><h3>Image:5</h3></div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="6.png">
        <img src="https://placehold.it/200x200">
      </a>
      <div class="desc"><h3>Image:6</h3></div>
    </div>
  </div>
</div>

此解决方案的问题是，如果尺寸不合适，则会裁切图像。

创建具有相同尺寸图片的小型图片库

1 个答案: