html css img解析操作

Question

我刚刚开始研究html和CSS，需要了解如何解决以下问题：

我的html正文中有以下部分

.section-meals {
    padding: 0;
    background-color: #f4f4f4;
}

.meals-showcase {
    list-style: none;
    width: 100%;
}

.meals-showcase li {
    display: block;
    float: left;
    width: 25%;
}

.meal-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.meal-photo img {
    /*
        Width 100% + height auto set to show up the entire image in a bounded area.
        This is similar to wrap content height and width in android and iOS.
    */
    width: 100%;
    height: 100%;
    /*
        Made everything bigger, but now the images are bigger than the container themselves.
        So we have to hide the overflow in the container with the property hidden.
    */
    transform: scale(1.30);
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0.6;
}

.meal-photo img:hover {
    opacity: 1;
    transform: scale(1.03);
}

<section class="section-meals">
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/1.jpg" alt='passport photo'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/2.jpg" alt='world map'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/3.jpg" alt='globe in hand'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/4.jpg" alt='taj mahal'>
            </figure>
        </li>
    </ul>
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/5.jpg" alt='cliff with beautiful houses'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/6.jpg" alt='eiffel tower'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/7.jpg" alt='Maya bay'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/8.jpg" alt='beach'>
            </figure>
        </li>
    </ul>
</section>

现在在网页上呈现时。我看到空白。因为我的图像都具有不同的分辨率。如何确保li中的所有元素彼此粘合，并且图像填充了框，因此看起来还不错。如果所有图像都具有相同的分辨率，则上述方法可以正常工作。

代码参考来自我所学的一个粗俗的课程。但我正在尝试自己的情况。

显示方式：

当所有图像都具有相同的分辨率时，这看起来像，但是我想要类似的效果：

Answer 1

您可以使用padding top trick to give your li an aspect ratio，然后使用对象适配使图像完美适配（您还需要使用polyfill来实现对象适配）：

body {
  margin:0;
}
.meals-showcase {
  /* reset list styles and use flex to line up in a row */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.meals-showcase>li {
  /* make li 25% width */
  max-width: 25%;
  width: 25%;
  margin: 0;
  padding: 0;
}

.meals-showcase figure {
  /* make figure into block and relative position, give this the aspect ratio - here I use 75% padding top */
  display: block;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 75% 0 0 0;
}

.meals-showcase img {
  object-fit: cover;    /* add this */
  display: block;
  position: absolute;   /* this is so it fills the figure */
  width:100%; 
  height:100%;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

.meal-photo img:hover {
  transform: scale(1.05);
}

.meals-showcase figure:hover {
  z-index:1; /* bring hover figure to front */
}

<section class="section-meals">
  <ul class="meals-showcase clearfix">
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/400/300" alt='passport photo'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/350" alt='world map'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/250/300" alt='globe in hand'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/300/300" alt='taj mahal'>
      </figure>
    </li>
  </ul>
  <ul class="meals-showcase clearfix">
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/300/400" alt='cliff with beautiful houses'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/300" alt='eiffel tower'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/400" alt='Maya bay'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/500" alt='beach'>
      </figure>
    </li>
  </ul>
</section>

Answer 2

之所以发生这种情况，是因为实际上图像的大小不同。在许多现代网站中，图像都经过处理（标有缩略图）以达到准确的尺寸，这首先应该避免这些问题。但是，使用失败保存CSS技术是个好主意。

首先确定所需的图像尺寸/纵横比，然后在样式表中进行设置。使用object-fit: cover可以消除某些“拉伸”了这种效果的图像，这可以确保图像覆盖整个盒子（即使某些部分在边缘丢失）。

Answer 3

尝试以下代码段。

可以在https://picsum.photos/120/300/?random

中尝试不同的大小

.section-meals {
    padding: 0;
    background-color: #f4f4f4;
    margin: 0;
}

.meals-showcase {
    list-style: none;
    width: 100%;
}

.meals-showcase li {
    display: inline-block;
    float: left;
    width: 25%;
}

.meal-photo {
    width: 100%;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.meal-photo img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.12);
    transition: transform 0.35s;
}

.meal-photo img:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);   
}

<section class="section-meals">
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/80/100/?random
" alt='passport photo'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/106/130/?random
" alt='world map'>
            </figure>
        </li>
         <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/114/90/?random
" alt='passport photo'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/90/100/?random
" alt='taj mahal'>
            </figure>
        </li>
    </ul>
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/144/360/?random
" alt='passport photo'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/130/300/?random
" alt='eiffel tower'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/140/300/?random
" alt='Maya bay'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://picsum.photos/120/300/?random
" alt='beach'>
            </figure>
        </li>
    </ul>
</section>

Answer 4

实际上，为了使object-fit正常工作，图像容器必须具有尺寸。在以下代码段中，取消注释/*height: 320px;*/就足以使其正常工作。当然，此尺寸是静态的，必须是连续的最小图片之一。

如果您想要一个完整的动态技巧，使其适合每一行的最小图片，而不是指定给定的高度或比例，则仍然可以使用javascript。我在这里做了一个简单的示例，该示例动态获取最小高度并将其应用于元素（在jQuery中）。

function resizeMealPhotos(){
  $('.meals-showcase').each(function(){
    var h = Infinity;
    $(this).find('.meal-photo').each(function(){
      $(this).css('height', 'auto');
    });
    $(this).find('.meal-photo').each(function(){
      var h2;
      if( (h2 = $(this).height()) < h){
        h = h2;
      }
    });
    $(this).find('.meal-photo').each(function(){
      $(this).css('height', h + 'px');
    });
  });
}

$(document).ready(function(){
  resizeMealPhotos();
});

$(window).on('resize', resizeMealPhotos);

.section-meals {
    padding: 0;
    background-color: #f4f4f4;
}

.meals-showcase {
    list-style: none;
    width: 100%;
}

.meals-showcase li {
    display: block;
    float: left;
    width: 25%;
}

.meal-photo {
    width: 100%;
    /*height: 320px;*/
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.meal-photo img {
    /*
        Width 100% + height auto set to show up the entire image in a bounded area.
        This is similar to wrap content height and width in android and iOS.
    */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
        Made everything bigger, but now the images are bigger than the container themselves.
        So we have to hide the overflow in the container with the property hidden.
    */
    transform: scale(1.30);
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0.6;
}

.meal-photo img:hover {
    opacity: 1;
    transform: scale(1.03);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-meals">
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/640/480/any" alt='passport photo'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/640/400/any" alt='world map'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/640/420/any" alt='globe in hand'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/480/480/any" alt='taj mahal'>
            </figure>
        </li>
    </ul>
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/480/480/any" alt='cliff with beautiful houses'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/640/480/any" alt='eiffel tower'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/640/320/any" alt='Maya bay'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="https://placeimg.com/640/400/any" alt='beach'>
            </figure>
        </li>
    </ul>
</section>