时间戳

首页 > 解决方案 > html css img 分辨率操作

html - html css img 分辨率操作

问题描述

我刚开始研究 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 中的所有元素相互粘连，图像填充框以使其看起来正常。如果所有图像都具有相同的分辨率，则上述工作正常。

代码参考来自我学习的一门 udemy 课程。但我正在尝试自己的场景。

这是如何出现的： 不同分辨率的所有图像

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

标签： htmlcss

解决方案

您可以使用padding top 技巧给您的 li 一个宽高比，然后使用对象拟合使您的图像完美拟合（您还需要一个 ie 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>

推荐阅读