3 NİSAN 2012, Salı
Sınırlayıcı kutu sığdırmak için ölçekle
Css-sadece bir çözüm sınırlayıcı kutu (En Boy oranı tutmak) içine bir görüntü ölçek var mı? Bu görüntüyü konteyner daha büyük çalışır:
img {
max-width: 100%;
max-height: 100%;
}
Örnek:
- Kullanım örneği 1 (iş): http://jsfiddle.net/Jp5AQ/2/
- Kullanım örneği 2 (iş): http://jsfiddle.net/Jp5AQ/3/
Ama bir boyut kap 0 kadar resim büyütmek istiyorum.
- Kullanım örneği 3 (çalışmıyor): http://jsfiddle.net/Jp5AQ/4/
CEVAP
4 NİSAN 2012, ÇARŞAMBA
CSS3 sayesinde bir çözüm var !
Çözüm background-image
gibi resim koymak ve daha sonra contain
background-size
ayarlanır.
HTML
<div class='bounding-box'>
</div>
CSS
.bounding-box {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Buraya Test: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
En son tarayıcılar ile tam uyumluluk: http://caniuse.com/background-img-opts
Merkezi sayı hizalama için, bu varyasyon kullanabilirsiniz:
.bounding-box {
background-image: url(...);
background-size: contain;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
Bunu Paylaş:
linux sınırlayıcı için daha fazla boşl...
android: imageview görüntüyü ekrana sı...
Ne kadar mesafe ölçmek ve bir sınırlay...
UİLabel - otomatik boyut bir metin sığ...
Nasıl verilen lat/lng için sınırlayıcı...