2016-03-21 45 views
0

Görüntüyü en boy oranını (16: 9) ve aynı anda yanıt vermek için css kullanmak istiyorum.Duyarlı görüntü en boy oranını korur ve her zaman merkezdedir

Bu resim her zaman ekranın ortasında olacak. Size yardımcı olmak için şemayı kontrol edin.

this mesajını buldum ve Chris'in çözümünü ve Isaac'ın çözümünü denedim. Ama görüntüyü merkeze getiremiyorum. Bootstrap kullanmayı denedim.

<div class="col-md-4">.col-md-4</div> 
<div class="wrapper col-md-4"> 
    <div class="main"> 
    This is your div with the specified aspect ratio. 
    </div> 
</div> 
<div class="col-md-4">.col-md-4</div> 

veya

<body> 
    <div class="col-md-4" id="wrap1">.col-md-4</div>   
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div> 
    <div class="col-md-4" id="wrap2">.col-md-4</div>   
</body> 

ancak tüm div'ler diğer altından birini görünür.

Bootstrap kullanarak ya da değil, div'u merkeze nasıl getireceğinizle ilgili herhangi bir fikir var mı?

Teşekkür enter image description here

cevap

1

Hep bir div benim img koymak ve birlikte div ortalamak:

margin:0 auto; 

Ve duyarlı görüntü için genişlik tanımlamak ve yükseklik oto olduğundan emin olun. Umut eder.

0

Bu, öğenizi sayfada ortalayacak.

.element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

I Eğer söz konusu ikinci bölümü için tercih en-boy oranında bir kabın% 100 görüntü için bir dakika-genişliği ya da maksimum genişliği tanımlar gerekir inanıyoruz. Ayrıca, en boy oranını dinamik olarak ayarlamanız gerekiyorsa, her zaman JS olur. Qjuery kullanabileceğiniz fonksiyonlara sahiptir, bu yüzden projenizde zaten kullanıyorsanız zor olmayacaktır.

DÜZENLEME: gibi bir yapıya sahip öneririz ikinci başlığında görüntüyü ortalamak için:

---------

sarın

-İkinci başlığındaki - --------------- image

resmi, ürünün% 100 boyutu olarak var. , ikinci başlığa göre bir genişliğe ve% 100 yüksekliğe sahip olan sargıya sahiptir.

Umarım bu yardımcı olur :)

İlgili konular