Küçük bir ipucu; CSS nin getirdiği güzellikleri biraz daha görebilmek için.

Resimleri “Div” içinde otomatik olarak belli ölçülerde gösterebilmek çoğu zaman sıkıntılıdır. Ama CSS ile bu sıkıntıyı aşmak mümkün.

Şöyle ki;

<div class="block">
<img src="resim.jpg" alt="" /></div>
<div class="block">
<img src="resim-2.jpg" alt="" /></div>

Burada iki ayrı div içinde iki ayrı resim var. Ama bu resimlerin boyutları birbirinden farklı ve istediğimizden daha büyük boyuttalar.

Bu noktada şöyle bir css işimizi görecektir:

.block {
background:#E3E1D5 none repeat scroll 0 0;
font-size:1em;
height:355px;
margin-right:10px;
padding:20px;
}
.block img{
background:#FFFFFF none repeat scroll 0 0;
display:block;
margin:0 auto;
padding:5%;
width:89%; /* Bu div içinde yer alan tüm resimler otomatik genişlikte */
border:0 none;
}

Daha detaylı şekilde örnek bir çalışmayı görmek için tıklayın.

Sizin de bu konuya dair farklı bir öneriniz varsa görmek isterim.