显示彼此相邻的水平和垂直图像的最佳解决方案

时间：2017-08-31 08:56:18

标签： html css image

我目前在这里和那里建立网站的时候已经没有想法了，彼此相邻。有水平和垂直图像，我想以相同的大小显示它们。有人知道这个问题的好方法吗？

Example of my Problem

这是demo 

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
}

figure {
  margin: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
  white-space: normal;
  width: 200px;
}

img {
  border: 5px solid green;
}
<h2>list of different sized images</h2>
<ul>
  <li>
    <figure>
      <img src="https://placeimg.com/200/150/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/120/180/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/180/120/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/150/150/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/200/180/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/200/120/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
</ul>

2 个答案:

答案 0 :(得分：0)

您可以使用#picture1: {width:'size'; height:'size'; }制作相同尺寸的图片。

看看这个：https://www.w3schools.com/TAgs/att_img_width.asp

答案 1 :(得分：0)

这是一个可能的解决方案：

1）在容器上设置display:flex以保持项目的高度一致。

2）在图像上设置object-fit: cover。 NB：这将裁剪图像。

请参阅object-fit: cover

上的MDN
  

封面

     

替换内容的大小可以保持其宽高比   填充元素的整个内容框。如果是对象的宽高比   与其框的纵横比不匹配，那么对象就是   夹住以适应。

.crop img {
  object-fit: cover;
  height: 150px;
  width: 200px; /* optional */
}


* {
  box-sizing: border-box;
}
ul {
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
}

figure {
  margin: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
  white-space: normal;
  width: 200px;
}

img {
  border: 5px solid green;
}

.flex {
  display: flex;
}

.crop img {
  object-fit: cover;
  height: 150px;
  width: 200px; /* optional */
}
<h2>BEFORE: list of different sized images</h2>
<ul>
  <li>
    <figure>
      <img src="https://placeimg.com/200/150/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/120/180/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/180/120/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/150/150/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/200/180/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/200/120/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
</ul>

<hr>
<h2>AFTER: A list with display:flex and object-fit:cover applied</h2>
<ul class="flex crop">
  <li>
    <figure>
      <img src="https://placeimg.com/200/150/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/120/180/animals" alt="">
      <figcaption> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/180/120/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/150/150/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/200/180/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="https://placeimg.com/200/120/animals" alt="">
      <figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</figcaption>
    </figure>
  </li>
</ul>

Codepen demo

相关问题
最新问题