Question

我将大图像拆分成许多较小的图像。如果调整浏览器窗口大小，我希望它们全部调整大小。到目前为止我的代码是：

<!DOCTYPE html>
    <body>
        <style>
        .splitimage{
        max-height:100%;
        max-width:100%;
        width:auto;
        }
        .keeptogether{
        width:100%;
        overflow:hidden;
        white-space:nowrap;
        line-height:0;
        word-spacing:-4px; 
        }
        </style>
        <div class="keeptogether">
            <div class="keeptogether">
                <img class="splitimage" src="worldmap-0-0.jpeg" />
                <img class="splitimage" src="worldmap-0-1.jpeg" />
                <img class="splitimage" src="worldmap-0-2.jpeg" />
            </div>
            <br class="keeptogether">
            <div class="keeptogether">
                <img class="splitimage" src="worldmap-1-0.jpeg" />
                <img class="splitimage" src="worldmap-1-1.jpeg" />
                <img class="splitimage" src="worldmap-1-2.jpeg" />
            </div><br class="keeptogether">
            <div class="keeptogether">
                <img class="splitimage" src="worldmap-2-0.jpeg" />
                <img class="splitimage" src="worldmap-2-1.jpeg" />
                <img class="splitimage" src="worldmap-2-2.jpeg" />
            </div>
        </div>
    </body>
</html>

但是当浏览器窗口缩小时，图像不会调整大小这是小提琴：https://jsfiddle.net/ntL9c5jt/

Answer 1

添加宽度为33.3％。到单元格.splitimage，请点击链接https://jsfiddle.net/ntL9c5jt/1/

Answer 2

将图片宽度设置为33.3333％ - 因此，它们将一起构成100％的屏幕

.splitimage {
		  max-height: 100%;
		  max-width: 100%;
		  width: 33.3333%;
		  /* as there are 3 images in a line*/
		}
		.keeptogether {
		  width: 100%;
		  overflow: hidden;
		  white-space: nowrap;
		  line-height: 0;
		  word-spacing: -4px;
		}

<body>
  <div class="keeptogether">
    <div class="keeptogether">
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-0-0.jpeg" />
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-0-1.jpeg" />
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-0-2.jpeg" />
    </div>
    <br class="keeptogether">
    <div class="keeptogether">
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-1-0.jpeg" />
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-1-1.jpeg" />
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-1-2.jpeg" />
    </div>
    <br class="keeptogether">
    <div class="keeptogether">
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-2-0.jpeg" />
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-2-1.jpeg" />
      <img class="splitimage" src="http://fivebs.net/fiddle/worldmap-2-2.jpeg" />
    </div>
  </div>
</body>

使用CSS调整多个图像的大小

2 个答案: