img src ile resmi kutunun içerisine otomatik sığdırma

grafikibrahim24 · 5 Mart 2019

Elimde 120 civarı resim var. Resim adedince 155-155 px kare açacağım ve her karenin içerisine bir resim koyacağım. Bütün resimlerim kare şeklinde değil, kimi yatay kimi dikey hepsi farklı.
Ben istiyorum ki, aşağıdaki resimde gördüğünüz şekilde yerleştirdiğim resim kutunun boyutuna göre otomatik olarak ayarlansın. (Yatay ve dikey kutunun tam ortasına yerleşecek şekilde)
Bana tek bir kutu için "ornekresim.jpg" ismi ile HTML ve CSS kodlarını yazar mısınız.
Ben bunu 100 adet kopyalayıp yalnızca "ornekresim.jpg" kısmını değiştirerek işimi göreceğim.

ahmetcadirci25 · 6 Mart 2019

Kod:

<!DOCTYPE html>
<html>
<head>
<style>

.contain {
object-fit: contain;
width:155px;
height:155px;
}

</style>
</head>
<body>

<img class="contain" src="paris.jpg">

</body>
</html>

grafikibrahim24 · 6 Mart 2019

ahmetcadirci25 dedi:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>

.contain {
object-fit: contain;
width:155px;
height:155px;
}

</style>
</head>
<body>

<img class="contain" src="paris.jpg">

</body>
</html>

Çok teşekkür ederim tam istediğim boyutlandırmayı yapıyor kodlar.
Ancak kutunun tam kenarına dayanmaması için, object-fit kodlarını 145x145 yaparak 5'er px boşluk bırakmak istedim. Bunu yaptığımda gördüğün gibi sola ve üste dayanıyor.
Hiç bir yere dayanmadan tam ortaya gelerek, her köşeden 5'er px boşluk bırakabilir miyim ?

ahmetcadirci25 · 6 Mart 2019

Kod:

<style>

.contain {
object-fit: contain;
width:145px;
height:145px;

padding: 5px;
}

</style>

grafikibrahim24 · 6 Mart 2019

ahmetcadirci25 dedi:
Kod:

<style> .contain { object-fit: contain; width:145px; height:145px; padding: 5px; } </style>

Süpersin !!! Çok teşekkürler.

img src ile resmi kutunun içerisine otomatik sığdırma

Ayrıntılı düzenleme

grafikibrahim24

Decapat

ahmetcadirci25

Kilopat

grafikibrahim24

Decapat

ahmetcadirci25

Kilopat

grafikibrahim24

Decapat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz