CSS ile Resim Nasıl Kırpılır?

Resimleri tasarımlarınıza uyarlamak için bazen kırpmanız gerekebiliyor. CSS ile resimleri kırpmadan, kırpılmış gibi gösterebilirsiniz. CSS ile resim kırpma konusunu çok basit bir örnekle ifade etmeye çalışayım. Kare bir fotoğrafı ya da resmi dikdörtgen hale getirmeye çalışalım.

HTML kodlarımız aşağıdaki şekilde. Dış tarafta bir div, içinde img etiketi.

<div class="image-container">
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="image.jpg" alt="Image" title="Css Ile Resim Nasıl Kırpılır? 1">
</div>

CSS ile de krıpma işlemimizi gerçekleştiriyoruz.

.image-container {
    width:100%;
    overflow:hidden;
    margin:0;
    height:100px;
}

Aşağıdaki kodlar da imajın yerleştirme kodları için.

.image-container img {
    display:block;
    width:100%;
    margin:-10px 0;
}

img etiketine eklediğimiz margin: – ile başlayan değerleri kendinize göre değiştirin. Bu değer, imajınızın hangi kısmının görüneceğini ifade ediyor.

Css Ile Fotoraf Nasil Kesilir Kirpilir

Fotoğraflarınızı, resimlerinizi Photoshop gibi herhangi bir grafik editörüne ihtiyaç duymadan sadece HTML ve CSS kodu kullanarak bu şekilde kırpılmış, kesilmiş gösterebilirsiniz. Bu özelliğin faydalarından biri ekstra bir görsel oluşturulmasının önüne geçmek ve resmin boyutunu istediğimiz zaman istediğimiz gibi değiştirebilmemizi sağlamak.

Popular Eğitimler

Css ile Tam Sayfa Arkaplan Nasıl Yapılır?

CSS ile tam sayfa arkaplan nasıl yapılır? Üstelik bu tam ekran arkaplanın, ekran boyutuna göre otomatik olarak genişleyip daralması da CSS’in arkaplan özelliği ile mümkün.

Ücretsiz Cloudflare CDN Kurulumu, Kullanımı ve Ayarları

Cloudflare, ücretsiz CDN hizmeti veren bir firma ve web sitelerimizin performansını artırmayı…

CSS Web Sitelerinde Kaydırma Çubuğu Renk Değiştirme

Bu HTML ve CSS eğitiminde herhangi bir JavaScript dosyası kullanmadan yandaki ScrollBar’ı…

CSS Nth-Child Kullanımı

CSS’te nth-child komutu nasıl kullanılır? Nth-child komutu kullanarak ilk element, son element ya da aralardaki element dizileri nasıl seçilir?

CSS ile Hareketli Renkli Gradient Arka Plan

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka…

CSS’te Pseudo Seçicileri Kullanımı (Sözde Sınıflar ve Elementler)

CSS’in bilmeniz gereken özelliklerinden biri Pseudo Classes (Pseudo Sözde Sınıfları) ve Pseudo…