2016-03-19 22 views
1

Sitemizde imajları göstermek için malzeme kartlarını kullanıyoruz. Görüntüler kullanıcı tarafından yüklendi, böylece farklı boyutlarda (250px'den büyük olsalar da) geliyorlar.Duyarlı kağıt oluşturucu kartları oluşturma

Görüntülerin en boy oranını koruyabiliyoruz, bu harika, ancak her satırdaki kartları aynı yükseklikte yaparken bunu nasıl yapacağımızı bilmiyoruz. Bu bizim amacımız - kartların içindeki görüntülerin en boy oranını korurken kartların aynı yükseklikte olmasını (duyarlı bir şekilde) sağlamaktır.

Our current display

Biz çok uzak almadan bütün gün bu karıştırmasını oldum. Herhangi bir yardım çok takdir edilmektedir.

HTML:

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

.card { 
    position: relative; 
    background-color: #f4f4f4; 
    // margin: 10px auto; 
    height: 100%; 
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7); 
} 

.card { 
    height: 100%; 
} 

.card .card-image img { 
    //object-fit: contain !important; 
} 

cevap

4

Kullanım Medya Sorguları ekranının boyutuna bağlı olarak genişlik/yükseklik ayarlamak için. JS oynamam Örnek: https://jsfiddle.net/3yegzwex/

HTML:

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

.card { 
    text-align: center; 
} 

@media (max-width: 990px) { 
    .resizeimg { 
    height: auto; 
    } 
} 

@media (min-width: 1000px) { 
    .resizeimg { 
    width: auto; 
    height: 350px; 
    } 
} 
2

görüntüleri gerçekten satır içi olmak zorunda mı? Veya background-image olarak ayarlanmış olabilirler (kullanıcı yüklendikleri için)? Eğer öyleyse, sorunu çözmek için background-size özelliğini cover olarak ayarlayabilirsiniz. Ayrıca, object-fit, not widely supported (henüz) olduğundan.

kapak

ihtiva tersi olan bir anahtar kelime. Resmi olabildiğince büyük ölçeklendirir ve görüntü en boy oranını korur (resim, öğütülmez). Görüntü, kabının tüm genişliğini veya yüksekliğini "kaplamaktadır". Resim ve kapsayıcının farklı boyutları olduğunda, resmi, sol/sağ veya üst/alt olarak kırpılır.

Kaynak: MDN

demo için this updated JSFiddle bakınız. padding-bottom, ihtiyaçlarınız için yüzde olarak değiştirilebilir. Değiştirmeye çalış ve ne yaptığını gör.


Satır içi resimler

görüntüleri inline olmak zorunda yoksa, bu çözümü uygulayabilirsiniz:

.card-image { 
    width: 100%; 
    padding-bottom: 50%; 
    overflow: hidden; 
    position: relative; 
} 

.card-image img { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

görüntü .card-image içine itilir ve bunun genişliğine uzatılır bu gerekli. Demo için bkz. this JSFiddle. padding-bottom, ihtiyaçlarınız için yüzde olarak değiştirilebilir. Değiştirmeye çalış ve ne yaptığını gör.