如何在高度较低的同时调整图像大小，同时尊重下面的容器？

时间：2018-06-15 18:41:53

标签： html css

img标签会自动调整大小。

但是，我正在制作一个灯箱，当您点击时，图像会显示在中间，而在底部则会显示所有图像。

带有图像的底栏应始终位于底部，图像应按比例放在屏幕中央，并考虑底部的栏。

因此，当我们从底部调整屏幕大小时，例如打开开发工具，图像应缩小，底部的条应该上升。

以下是codepen：https://codepen.io/Aurelian/pen/eKEQMP?editors=0100

这是HTML：

<div class="container">
<ul class="gallery__list">

    <li class="gallery__item">
    <a class="gallery__link" href="https://farm5.staticflickr.com/4357/36172707494_53c0f25d98_h_d.jpg">
        <img src="https://farm5.staticflickr.com/4357/36172707494_53c0f25d98_h_d.jpg">
    </a>
    </li>

    <li class="gallery__item">
    <a class="gallery__link" href="https://ritzcarlton-h.assetsadobe.com/is/image/content/dam/the-ritz-carlton/hotels/asia-pacific/japan/tokyo/guest-rooms/RCTOKYO_00451.jpg?$XlargeViewport100pct$">
        <img src="https://ritzcarlton-h.assetsadobe.com/is/image/content/dam/the-ritz-carlton/hotels/asia-pacific/japan/tokyo/guest-rooms/RCTOKYO_00451.jpg?$XlargeViewport100pct$">
    </a>
    </li>

    <li class="gallery__item">
    <a class="gallery__link" href="https://thewallpaper.co/wp-content/uploads/2016/09/hd-place-wallpaper-high-definition-cool-images-cities-desktop-images-view-point-hd-Exotic-Places-1920x1200.jpg">
        <img src="https://thewallpaper.co/wp-content/uploads/2016/09/hd-place-wallpaper-high-definition-cool-images-cities-desktop-images-view-point-hd-Exotic-Places-1920x1200.jpg">
    </a>
    </li>

    <li class="gallery__item">
    <a class="gallery__link" href="https://thewallpaper.co/wp-content/uploads/2016/09/landscapes-cool-images-cities-best-place-ever-backgrounds-view-point-world-Exotic-Places-1920x1200-768x480.jpg">
        <img src="https://thewallpaper.co/wp-content/uploads/2016/09/landscapes-cool-images-cities-best-place-ever-backgrounds-view-point-world-Exotic-Places-1920x1200-768x480.jpg">
    </a>
    </li>

    <li class="gallery__item">
    <a class="gallery__link" href="http://hotelslike.com/wp-content/uploads/2016/09/117725.jpg">
        <img src="http://hotelslike.com/wp-content/uploads/2016/09/117725.jpg">
    </a>
    </li>

    <li class="gallery__item">
    <a class="gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
        <img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
    </a>
    </li>

  <li class="gallery__item">
    <a class="gallery__link" href="https://blog.eurail.com/wp-content/uploads/2016/08/La-Rambla-at-night.jpg">
        <img src="https://blog.eurail.com/wp-content/uploads/2016/08/La-Rambla-at-night.jpg">
    </a>
    </li>

  <li class="gallery__item">
    <a class="gallery__link" href="http://www.hopper.com/cms-assets/images/Destinations/Europe/Ireland/Dublin_shutterstock_111481523_800x.jpg">
        <img src="http://www.hopper.com/cms-assets/images/Destinations/Europe/Ireland/Dublin_shutterstock_111481523_800x.jpg">
    </a>
    </li>

</ul>
</div>


<div class="modal-gallery">
<div class="modal-gallery__main">
<div class="modal-gallery__main--outer">

        <!-- Tool Bar -->
        <ul class="modal-gallery__tool-bar">
            <span class="modal-gallery__close"><i class="fa fa-times" aria-hidden="true"></i></span>
            <a class="modal-gallery__downolad" href=""><i class="fa fa-download" aria-hidden="true"></i></a>
            <span class="modal-gallery__fullscreen"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
            <span class="modal-gallery__autoplay"><i class="fa fa-play-circle-o" aria-hidden="true"></i></span>
            <div class="modal-gallery__counter">
                <span class="modal-gallery__counter--current">1</span>
          <span>/</span>
                <span class="modal-gallery__counter--all">5</span>
            </div>
        </ul>


    <!-- Main Section -->
        <div class="modal-gallery__main-image-wrap">
        <img class="modal-gallery__main-image" src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">

        <div class="modal-gallery__arrow-wrap">
            <button class="modal-gallery__arrow-prev"></button>
            <button class="modal-gallery__arrow-next"></button>
        </div>
        </div>


        <div class="modal-gallery__pic-list">
    <ul class="modal-gallery__pic-list-wrap">

            <li class="modal-gallery__item">
            <a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
            </a>
            </li>

      <li class="modal-gallery__item">
            <a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
            </a>
            </li>

      <li class="modal-gallery__item">
            <a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
            </a>
            </li>

      <li class="modal-gallery__item">
            <a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
            </a>
            </li>

    </ul>
        </div>

</div>
</div>
</div>

这是CSS：

*, *:before, *:after {
 box-sizing: border-box;
}

.container {
  max-width: 960px;
  margin: 50px auto;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  height:  auto;
}

// Gallery List
.gallery {

  &__item {
    width: calc(25%);
    float: left;
    height: 220px;

    & img {
      height: 220px;
      object-fit: cover;
    }
  }



}

// Gallery Modal
.modal-gallery {
     position: fixed;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  transition: opacity 0.15s ease 0s;
  background-color: #0e0e0e;
    // opacity: .95;

  &__main {
      height: auto;
      position: relative;

    &--outer {
      height: auto;
      position: relative;
      top: 15px;
    }
  }

  &__main-image-wrap {
    position: relative;
    height: auto;
    width: 100%;

  }

  &__main-image {
    width: auto;
    // max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 1;
  }

  &__arrow-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    z-index: 20;
  }

  &__tool-bar {
    color: #acabab;
    z-index: 10;
    left: 0;
    position: absolute;
    top: 0;
    padding: 15px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.45);
  }

  &__counter {
    display: inline-block;
  }

  &__pic-list {
    width: 100%;
    background: red;
    bottom: 0;
  }

  &__pic-list-wrap {
    width: 100%;
    padding: 25px 0;
    border: 1px solid #313131;
    border-left: 0;
    border-right: 0;
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  &__item {
    width: 10%;
    float: left;
    padding: 15px;
    margin-right: 15px;

    & img {
       height: 50px;
      width: 100%;
      object-fit: cover;
    }
  }

}

1 个答案:

答案 0 :(得分：1)

  1. 将幻灯片元素和底栏用图像包装在容器中。

  2. 为每个人提供一个明确的高度（即幻灯片height: 80%，底栏height: 20%）。

  3. 然后将height: 100%应用于图片容器（例如a和/或li）。

  4. 然后将height: 100%; width: auto;应用于每张图片。这将使图像响应，同时保持其纵横比。然而，重要的是图像容器是动态的（即高度/宽度％或vh或w / e）。例如，你也可以width: 100%; height: auto;。

相关问题
最新问题