2014-04-23 23 views
5

Genişlik:% 100 ve maksimum genişlik:% 100'ü herhangi biri bir kez kullanıldığında birbirinin yerine kullanılabilir mi?width: 100% vs max-width: 100%

img{ 
    width:100%; 
} 

ile:

img{ 
    max-width:100%; 
} 

Burada bir şey eksik Örneğin

Ben aynı sonuçları almak?

cevap

8

Resimleriniz her zaman iki kural dahilindeki öğelerden daha büyükse, aynı davranacak gibi görünecektir. Bir img, ana öğeden birinci kuraldan küçükse, üst öğesinin tam genişliğine gerilecektir. İkinci kural olmaz.

+1

Evet, test ettim ve açıkladığınız gibi çalışıyor. Bu yüzden, genişlik kullanmalıyım:% 100 görüntüümün ana öğe kadar geniş olacağından emin olmak isterdim, ancak maksimum genişlik:% 100 gerçek boyutunu aşmayacağından emin olmak istiyorsam? –

+0

Oldukça fazla. Şahsen, "genişlik:% 100" ü resimlere uygulamak için hiçbir zaman iyi bir nedenim olmadı çünkü ana öğe görüntüden daha geniş bir şekilde büyürse bulanıklaştırmalarını istemiyorum. Ayrıca, 'max-width: 100%' değerinin global olarak ayarlanmasının üçüncü taraf widget'larında ve potansiyel olarak kendi içeriğinizde beklenmedik yan etkilere sahip olabileceğini unutmayın. Örneğin, Google Haritalar ile ilgili sorunlar yaşadım. Bunun yerine, bu kuralla 'img.responsive' gibi bir sınıf oluşturmayı veya onu .blog-post img' gibi bir seçici aracılığıyla bir içerik alanına dahil etmeyi öneririm. –