如何在div中自動調整圖像大小？

編輯：我自己想通了https://gyazo.com/afc898b2bd2ed387efd9b598c5a1eed5 如何在div中自動調整圖像大小？

感謝您試用

在每個圖像的右側，有是空的黑色空間。我正在尋找的信息，如何從行帶來的圖像下佔用儘可能多的空間可能並重新調整自身大小，即使它意味着擠壓

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; 


}

來源

2016-01-03 Osu Community

有點不清楚你想達到什麼目的。空的黑色空間？你不是設置填充，因此空的黑色空間？或者是什麼空的黑色空間？ – Roope

我希望得到的結果如下：https：//gyazo.com/21e9fbe7b10065276ef843150d794b7b但是圖像實際調整大小......在圖片中，您可以滾動到右側以查看圖像的其餘部分 - - >頁面右側的圖片不應該讓你繼續向右走，而是重新調整自己以適應任何缺失的空間。 –

嘗試使用：第n個孩子（）來訪問每個索引然後給它寬：

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

\t <div class = "container"> 
 
\t \t <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>

來源

2016-01-03 12:15:09 Gintoki

的.top股利你可以增加寬度，使另一個圖像可以適應下一個空間。在你的codePen中使用這個CSS。

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

來源

2016-01-03 12:20:43

如何在div中自動調整圖像大小？

回答

相關問題