Question

我的模态中有一个图像库，使用flexbox进行样式设置。问题是一些太大的图片水平流过并使弹性框伸展，所以它旁边的项目搞砸了，尽管在css中设置了弹性权重。

<div class="slideshow-container">
    <div class="mySlides fade" style="display: block;">
         <div class="numbertext">1 / 16</div>
              <img src="./img/normal/image.jpg" class="galimg" style="height: 331px;">
         <div class="text">Image description</div>
    </div>
    ....
</div>

我希望每张图片都能保持其宽高比。有些是风景，有些是肖像。所以我想我会尝试以下方法：

var maxHeight = $('#modal-gallery').height()-39; // need 39px for the gallery navigation. 
var maxWidth = $('#modal-gallery').width();
var ratio = maxHeight/maxWidth;
$('.galimg').each(function(i){  
    if ($(this).height()/$(this).width() > ratio){
        $(this).width(maxWidth);
    } else {
        $(this).height(maxHeight);
    }
});

CSS：

#modal-gallery { // this is the div surrounding the gallery
    flex: 6;
    display: flex;
    margin-right: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.slideshow-container {
    display: flex;
    position: relative;
    margin: 0;
}

我知道问题可能在我的JS中，因为我尝试记录宽度和高度并经常得到0. html是通过JS动态生成的。我尝试添加onImgLoad函数，但没有得到任何结果。

Answer 1

没有必要做js的事情。只需修复你的CSS。添加一些样式和HTML元素。以下是在许多网站中显示不同尺寸图像的最常用方法（请同时展开代码段以了解其行为）。

#modal-gallery { // this is the div surrounding the gallery
    flex: 6;
    display: flex;
    margin-right: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.slideshow-container {
    display: flex;
    position: relative;
    margin: 0;
}
.mySlides{
    display:block
}
.slide-image{
  display:inline-block;
  width:220px; 
  text-align:center;
  vertical-align:top;
  margin-bottom: 20px;
}
.img-container{
  display:block;
  width:200px;
}
.img-container .img{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.img-container img{
  max-height:200px;
  max-width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
    <div class="mySlides fade">
        <div class="slide-image">
          <div class="numbertext">1 / 16</div>
          <div class="img-container">
            <div class="img">
              <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="galimg" />
            </div>
          </div>                
          <div class="text">Image description</div>
      </div>
      <div class="slide-image">
          <div class="numbertext">1 / 16</div>
          <div class="img-container">
            <div class="img">
              <img src="http://i.imgur.com/RRUe0Mo.png" class="galimg" />
            </div>
          </div>                
          <div class="text">Image description</div>
      </div>
      <div class="slide-image">
          <div class="numbertext">1 / 16</div>
          <div class="img-container">
            <div class="img">
              <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="galimg" />
            </div>
          </div>                
          <div class="text">Image description</div>
      </div>
      <div class="slide-image">
          <div class="numbertext">1 / 16</div>
          <div class="img-container">
            <div class="img">
              <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="galimg" />
            </div>
          </div>                
          <div class="text">Image description</div>
      </div>
      <div class="slide-image">
          <div class="numbertext">1 / 16</div>
          <div class="img-container">
            <div class="img">
              <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="galimg" />
            </div>
          </div>                
          <div class="text">Image description</div>
      </div>
       <div class="slide-image">
          <div class="numbertext">1 / 16</div>
          <div class="img-container">
            <div class="img">
              <img src="http://i.imgur.com/RRUe0Mo.png" class="galimg" />
            </div>
          </div>                
          <div class="text">Image description</div>
      </div>
    </div>
  
</div>

如何使用flexbox维护模态中的图像宽高比？

1 个答案: