Question

我有一个未知数量的图像（最多三个），我以编程方式添加到html输出。我想将图像放在容器中，以便它们以容器本身不超过固定宽度的方式自动调整大小。我尝试了各种解决方案，例如这里提到的答案的修改版本（Center image in container element with fixed size (CSS, HTML)），但如果图像宽度超过其固定宽度，我的解决方案将继续在边界容器上流动。

### HTML ###


<div id="container">
    <div class="image-container">
        <img src="#" alt="Image One" />
        <img src="#" alt="Image Two" />
        <img src="#" alt="Image Three" />
    </div>
</div>


### CSS ###

#container {
    width: 400px;
    height: 100px;
    display: table;
    background-color: #ccc;         
}

#container .image-container {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

#container .image-container img {
    max-width: 100px;
    max-height: 60px;        
}

修改我不是一个javascript wizz，但以下为我做了伎俩。示例中显示的固定图像宽度和高度由将此HTML输出放在一起的程序设置。

      <script type="text/javascript">
      <!--
      function resize_image( img ) {
          var newSize = scaleSize(120,100,img.width,img.height);
          // alert(newSize);
          img.width=newSize[0]; img.height=newSize[1];
      }
      function scaleSize(maxW, maxH, currW, currH) {
          var ratioW=currW/maxW;
          var ratioH=currH/maxH;

          var ratio=1;
          if (ratioW>ratioH) ratio=ratioW; else ratio=ratioH;

          if (ratio>1) {
              currH=currH/ratio;
              currW=currW/ratio;
          }
          return [currW,currH];
      }
      -->
      </script>

然后用

加载图像

<div class="s1">
  <img id="img0" src="1.png" class="img_class" onload="resize_image(document.getElementById('img0')); return true;"/>
  <img id="img1" src="2.png" class="img_class" onload="resize_image(document.getElementById('img1')); return true;"/>
</div>

<style type="text/css">
 .s1 { width:320px; height:100px; text-align: center; vertical-align: middle; }
 .img_class { display: inline-block;     vertical-align:middle; }
</style>

将多个图像对齐在容器中

0 个答案: