Resimlerin çözünürlüğünü (16:9 gibi) nasıl koruyabilirim?

bukr3j 1002 gün önce

612 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Video galeri yapıyorum ve responsive kısmında resimleri boyutlandırmakta güçlük çekiyorum. Aklıma gelen en hızlı çözüm neredeyse bütün çözünürlüklere piksel piksel ayarlamak.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (4)

bukr3j

982 gün önce

Bootstrap kullanarak hallettim. Genede çok sağ olun. o7

#009653

ebykdrms

993 gün önce

Görselleri orantılı boyutlandırmak için CSS'in aspect-ratio özelliğini kullanabilirsiniz. Örneğin:

img {
    width:100%;
    aspect-ratio: 16/9;
}

Böylece <img /> elementiniz genişliğie göre kendini boyutlandırırken yüksekliğini de orantılı olarak koruyacaktır.

Eğer img boyutları sabit olsun ama görsel bu alanda kendini yerleştir istiyorsanız CSS'in object-fit özelliğini kullanabilirsiniz. Örneğin:

img {
    width:300px;
    height:300px;
    background-color:#000;
    object-fit: cover; /* görseli kırpılmış şekilde 300x300'lük alana yerleştirir. cover yerine contain derseniz kırpmadan boyutlandırma yapar. */
}

#009506

aspava

993 gün önce

@media seçiciler ile resim genişliğine 100% ve yüksekliğine auto vererek

Mobil Ekranlar için :

@media (max-width: 768px) {
.img { width:100%; height:auto}
}

şeklinde tablet, pc ekranları, mobil ekranlara göre boyutlandırarak

yada media seçicilere girmek istemiyorum diyorsan boyutlandırmalarını tamamen yüzde olarak çalışacaksın.

#009505

sifresifirlamaekle

997 gün önce

bir kapsayıcı belirle. daha sonrasında resim için width: 100% !import diyerek genişliği kapsayıcının içerisinde %100 olacak şekilde zorla. ardından yüksekliği auto olarak ayarla. bu durumda ekranın boyutuna göre otomatik olarak boyutlandırılacaktır o kısım.

#009488