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

Ağustos 2018
YouTube'ta Takip Et

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.

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

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

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.

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.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.

Kafanıza Takılan Sorular

  • Gerçekten eline koluna sağlık. Yahu nette şu resim kırpma işini en düzgün şekilde paylaşan sensin hocam… Teşekkürler…