Görüntü, genişlik ayarına uyarlanmadı

Question

Bir sitede birden fazla resim bloğum olduğu bir bölüm var. Birden çok satır içeren iki sütunum var. Bazı sebeplerden dolayı bu görüntülere kenar ve genişlik uygulanmıyor. Medya sorgumda viewport 640px veya daha az bir kod için aşağıdaki kod var. Sayfanın köşesini sürüklediğinizde, görüntüler boyut olarak ölçeklenmez. Ayrıca soldaki görüntüler kenar boşluğu ile hareket etmek yerine yerinde kalır.

Site Sponsors adlı bölümün altında 640 piksel veya daha az bir viewport bulunur.

Görüntülerin, kenar boşluğunun yanı sıra height ve width boyutlarında ölçeklenmesine neden olmayan nedir?

ben bir yüzde temelinde tanımlanan görüntüleri width sahip görebileceğiniz gibi:

.b_250 img { 
    width: 55%; 
    height: auto; 
} 
.b_250 iframe { 
    width: 55%; 
    height: auto; 
} 

yanı sıra marjı

tanımlamıştır:

.sponsors { 
    width: 100%; 
    margin: 0 2.5%; 
} 

kimse yanlış ne yapıyorum görüyor mu?

<div id="sponsor-left"> 
    <div class="b_250"> 
    <a href="PMC-spray-foam-equipment"><img src="images/Contractor Images/PMC spray foam equipment for sale.jpg"></a> 
    </div> 
    <div class="b_250"> 
    <a href="Green-Insulation-Technologies"><img src="images/Contractor Images/Green Insulation Technology 300x200.jpg"></a> 
    </div> 
    <div class="b_250"> 
    <a href="Sprayworks-Equipment-Group"><img src="images/Contractor Images/Spray foam rigs for sale a series.jpg"></a> 
    </div> 
</div> 
<div id="sponsor-right"> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
</div> 


.container { 
    width: 100%; 
} 
.content { 
    float: none; 
    text-align: center; 
    width: 100%; 
} 
/*----Second to Last Homepage Article---*/ 
#latestnews { 
    width: 100%; 
    text-align: center; 
} 
#latestnews .latestnews h2{ 
    margin: 10px 5%; 
    font-size: 1.3em; 
    width: 90%; 
} 
#latestnews ul, #latestnews li{ 
    text-align: center; 
} 
#latestnews li{ 
    margin: 0 auto; 
} 
.latestnews img{ 
    margin: 0 auto; 
    text-align: center; 
} 
#latestnews div.latestnews{ 
    float:none; 
    width: 100%; 
} 
#latestnews p { 
    padding: 20px 10px; 
    clear: both; 
} 
#latestnews p.readmore{margin-top:10px; text-align:center;} 



.column .sponsors { 
    width: 100%; 
} 
.column { 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
} 
.column .sponsors .b_250{ 
    border: none; 
} 
.b_250 img { 
    width: 55%; 
    height: auto; 
} 
.b_250 iframe { 
    width: 55%; 
    height: auto; 
} 
.sponsors { 
    width: 100%; 
    margin: 0 2.5%; 
} 
.sponsors h2{ 
    margin: 10px 5%; 
    font-size: 1.3em; 
    width: 90%; 
    text-align: center; 
} 
#sponsor-left { 
    float: left; 
    width: 45%; 
} 
#sponsor-right { 
    float: right; 
    width: 45%; 
} 

} 

Answer 1

(ı Seçicilerdeki kimlikleri kullanmaktan kaçınmak tercih rağmen) bu eklenti, reklamları ortalamak için:

#sponsor-left a > img { margin: 0 auto; } 

hangi kısmında ardından doldurmak için% 100'e görüntülerin genişliğini artırabilir işaret sol ve sağ sütunlar için bildirdiğiniz genişlik. Ayrıca ben

Varsayılan görüntü tarafından display:block veya display:inline-blockdisplay:inline olduğunu kullanmalıdır görüntü merkezi olması için display:block max-width:100%; height:auto;

deneyin float: right; kaldırıp display: inline-block;

Answer 2

geçmek açıklamalarda belirtildiği şekilde

Ho merkeze mi

resminizin display:block kullanım margin-left:auto; ve margin-right:auto;

ve display:inline-block için görüntü ana öğeye text-align:center vermek

Not

görüntü css yok tam bakım Be ise float:left veya float:right