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

【问题标题】：How to auto resize images within div?如何在 div 中自动调整图像大小？
【发布时间】：2016-04-07 04:20:54
【问题描述】：

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

感谢您的尝试

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

   *{
    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;


}

【问题讨论】：

您想要实现的目标有点不清楚。空白的黑色空间？你不是在设置填充，因此是空白的空格吗？还是什么空白处？
我希望结果是这样的：gyazo.com/21e9fbe7b10065276ef843150d794b7b 但是图像实际上已调整大小...在您看到的图片中，您可以向右滚动以查看图像的其余部分 - ---> 页面右侧的图像不应该让您继续向右走，而是重新调整自身大小以适应任何缺失的空间。

标签： css image resize

【解决方案1】：

.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;
}

【讨论】：

【解决方案2】：

尝试使用 :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>

【讨论】：