Question

编辑：我自己想出来https://gyazo.com/afc898b2bd2ed387efd9b598c5a1eed5

感谢您的尝试

在每张图片的右侧，都有空的黑色空格。我正在寻找有关如何从下面的行中获取图像以获取尽可能多的空间并重新调整自身大小的信息，即使它意味着挤压。

CodePen：http://codepen.io/anon/pen/BjpwLw

   *{
    margin: 0 auto;
    padding: 0;


}

body{
left: 0;
margin: 0 auto;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color:#000;

}

.top{
background-color:#333;
width:100%;
height: 50px;
position: relative;



}

img{
position: relative;
top: 55px;
left: 55px;
max-height: 304px;
width: auto;
padding: 0.05%  0.05%;
border-radius:5px;


}

img:hover{
opacity:0.4;


}

Answer 1

尝试使用：nth-child（）访问每个索引，然后给它宽度：

.container{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
img{
  height: 150px;
}
img:nth-child(1), img:nth-child(5){
  width: 30%;
}
img:nth-child(2){
  width: 25%;
}
img:nth-child(3){
  width: 25%;
}
img:nth-child(4){
  width: 18%;
}
img:nth:-child(6){
  width: 30%;
}
img:nth-child(7){
  width: 24%;
}
img:nth-child(8){
  width: 16%;
}

	<div class = "container">
		<div class = "top">
<img src="https://images.unsplash.com/photo-1444124746228-e0356266964d?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1700"  alt="" />
<img src="https://images.unsplash.com/photo-1416183793821-cfdaa8c72745?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=e4f4b36f5409245ba8c9fe11bd408ce1" alt="" />
<img src="https://images.unsplash.com/photo-1417261726333-db38183ebcb1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=a048b87acf17ebac312f25e80338b4a5" alt="" />
<img src="https://images.unsplash.com/reserve/yZfr4jmxQyuaE132MWZm_stagnes.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=56ac51ed7e3597101bf9450fe1fa5f49" alt="" />
<img src="https://images.unsplash.com/photo-1446117788378-6805add75533?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1700" alt="" />
<img src="https://images.unsplash.com/6/lighthouse.jpg?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1700" alt="" />
<img src="https://images.unsplash.com/photo-1447756285628-47953ed14e2d?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1700" alt="" />
<img src="https://images.unsplash.com/reserve/D4zfsMrIT3i4Fuxqs5Gm_13129149325_7560b79cf2_o.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=69e8ba306a54c810d2c807933e3f97f0" alt="" />
   </div>
</div>

Answer 2

.top div您可以增加宽度，以便另一个图像可以适合下一个空格。将此CSS与您的codePen一起使用。

* {
    margin: 0 0;
    padding: 0;
}

body{
    left: 0;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color:#000;
}

.top{
    background-color:#333;
    width:130%;
    height: 50px;
    position: relative;
}

img{
    position: relative;
    top: 0;
    left: 0;
    margin: 2px;
    max-height: 304px;
    width: auto;
    padding: 0.05%  0.05%;
    border-radius:5px;
    float: left;
}

img:hover{
    opacity:0.4;
}

如何在div中自动调整图像大小？

2 个答案: