Nesneye uygun Özellik CSS’de nasıl çalışır?
Hepimizin bildiği gibi, web sitelerini düzenlerken videoların ve resimlerin sorunları var. Sınırlı alanımız olduğunda olduğu gibi, o zaman bir görüntünün yüksekliğini değiştirmemiz gerekiyor, bu nedenle tarayıcıları yeniden boyutlandırmak en boy oranını karşılamayacaktır, böylece bu problemler CSS-nesne sığdırma ve konumlandırma kullanılarak da çözülebilir. Bundan önce, bir resim ile resim içerik kutusu arasındaki farkı bilmeliyiz. Resim, bunun yükseklik ve genişlikte orijinal bir resim olduğunu ve içerik kutusunun, genişlik ve yükseklik değerlerini belirterek web sayfasının içinde bir <img> öğesine sahip olduğunu söylüyor.
Bu özellikler, CSS’nin arka plan rengi özelliklerine çok benzer. Bu Nesne sığdırma, değiştirilen öğelerle iyi çalışır, yani bir görüntü ve arka plan özellikleri video bölümüne uygulanamaz, ancak nesne uyumu iyi gider. Ve değiştirilen öğenin, boyutları CSS sınırları dışında tanımlanmış bir öğe olduğu söylenir. Kesin örnekler <img> ve <video>, gömülü belgeler olması durumunda <input> öğesidir.
Nesne uyumu, aşağıda gösterilen olası değerlere sahiptir:
- fill: Başlangıç değeri de varsayılan bir değer olarak kabul edilir. Bu, bir eleman kabını, kendilerini kap kutusunun içine sığdırmak için uzatır. Burada kutunun yüksekliği ve genişliği aynıdır.
- kapak: Bu özellik, resimle birlikte tüm bir kapsayıcıyı kapsar, en-boy oranını korumak için kendisini büyütür.
- içerme: Bu özellik değerlerinde öğe içeriği, kap kutusu içinde kalacak şekilde yeniden boyutlandırılır ve yine de en boy oranını korur. Ana faydası, görselin içerik kutusunun içinde bulunmasını sağlamasıdır. Kutunun içine sığmazsa, belirtilen arka plan rengi kalan alanı doldurur.
- küçültme: Bu, hiçbirinin değerini karşılaştırır ve boyut olarak daha küçük olan öğeyi içerir ve seçer (belirli görüntüyü küçültür).
- yok: Kapsayıcı boyutunu ihmal ederek öğe içeriğinin orijinal boyutunda kalmasını sağlar. Bu, bazen görüntünün kutudan çıkmasına veya kabın dışına çıkmasına neden olabilir. İçsel bir en boy oranı aynı kalır. Görüntü kutunun dışına taştığında kırpma gerçekleşebilir.
CSS nesne uyumu örnekleri
Bu bölümde, bir görüntünün genişliğini ve yüksekliğini değiştirerek gösterimli bir örnek göreceğiz.
Örnek 1
İşte farklı nitelik özellik değerleri için kısa bir örnek.
Kod:
kıyafet.html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Object-Fit Property Demo
</title>
<style>
img {
width: 230px;
height: 450px;
object-fit: Fill;
}
</style>
</head>
<body>
<h1>CSS Object-Fit Property Demo Using Fill </h1>
<imgsrc="cat.jpeg"lt=" Cat Animal Pic" width="550" height="150">
</body>
</html>
Bu doldurma özelliği, aşağıdaki demoda görebileceğimiz kutuya sığdırmak için orijinal bir görüntüyü uzatır.
Kapak Kullanımı:
Cat Görüntüsünün farklı konumunu görüntülemek için yukarıdaki HTML kodu bu değere değiştirilir.
Kod:
<style>
img {
width: 230px;
height: 450px;
object-fit: cover;
}
</style>
Burada resim kutuya sığacak şekilde kırpılır
İçeren:
Aynı HTML kodu için, görüntüyü ayırt etmek için arka plan rengi uyguladık. Resim kutunun yüksekliğine ve genişliğine uyduğundan burada kalan boşluk sarı olarak gösterilir.
Kod:
bg.html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Object-Fit Property Demo
</title>
<style>
img {
width: 230px;
height: 450px;
background: yellow;
color: red;
object-fit: contain;
}
</style>
</head>
<body>
<h1>CSS Object-Fit Property Demo Using Contain </h1>
<imgsrc= "cat.jpeg"lt=" Cat Animal Pic" width="550" height="150">
</body>
</html>
Çıktı:
Ölçek küçültmeyi kullanma:
Kod:
<style>
img {
width: 230px;
height: 450px;
object-fit: scale-down;
}
</style>
Örnek #2
Tüm değerleri bir arada gösteren uygulama.
Kod:
kıyafet.html
<html>
<head>
<title>My CSS </title>
<link rel="stylesheet" href="css/outfit.css">
</head>
<body>
<h1>CSS object-fit</h1>
<section id="falls">
<h1>original images</h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
</section>
<section>
<h1>Original structure: <code>img { width: 150px; height: 150px; border: 1.5px solid; background:purple; }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg.jpg" alt>
<h2>Squished Picture</h2>
</section>
<section class="contain">
<h1>Original Structure along with the image + <code>img { object-fit: contain }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
<h2>Images are appropriate with the Aspect ratio</h2>
</section>
<section class="cover">
<h1>Original Structure + <code>img { object-fit: cover; }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
<h2>Changes in image to cover the width and height</h2>
</section>
<section class="none">
<h1>Original Structure + <code>img { object-fit: none; }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
<h2>Images are cropped to maintain the original pic</h2>
</section>
</body>
</html>
Ve yukarıdaki HTML kodunun CSS dosyası burada verilmiştir.
Kod:
kıyafet.css
body {
font-family: calibri, sans-serif;
margin: 1;
text-align: center; }
h1, h2 { font-weight: 80; }
section:nth-child(even) {
background: green;
}
#falls img {
width: 35%;
max-width: 250px;
height: auto;
margin: 1.5%;
}
section h1 {
font-weight: 400;
padding-top: 2.5rem;
}
code { font-family: inherit; font-weight: 80; }
section img {
width: 150px;
height: 150px;
border: 1.5px solid;
background: purple;
}
section.containimg {
object-fit: contain;
}
section.coverimg {
object-fit: cover;
}
section.noneimg {
object-fit: none;
}