Nesne Pozisyonu - (object-position)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
  font-family: 'Fira Sans Condensed', sans-serif;
  margin: 0 auto 0 auto;}
img {
  background-color:#f44336;
  height: 180px;
}

.image {
  height: 170px;
  object-fit: none;
  /*  background-color: #f44336;*/
}

.image--center {
  object-position: 50% 50%;
}

.image--bottom-right {
  object-position: 100% 100%;
}

.image--bottom-left {
  object-position: 0  100%;
}

.image--top-left {
  object-position: 0  0;
}

.image--up {
  object-position: 50%  120%;
}

.image--down {
  object-position: 50%  -20%;
}

.image--left {
  object-position: 120%  50%;
}

.image--right {
  object-position: -20%  50%;
}

.image--background-image {
  object-position: 140%  90%;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQDmLr82pYBag8JOqzJdEt4mD7AKbNWeVceQ5NH2Tm6IRGdmXxK0hgx5GKxcFseS6pQXkolkICb3l0l8rk0_e1WQw65ZaYSJrTYYB4qZzfZs-X1wjQ8BhAbjnB3nVenkDr9yF_IKqBXA/s1600/blogger-image.png");
}

html {
  color: #eee;
  padding: 30px;
  font-family: 'Source Code Pro', Monaco;
  background-color: #333;
}

.container {
  float: left;
  margin: 0 20px 20px 20px;
  padding: 0;
  width: 45%;
}
.container:nth-child(2n + 1) {
  margin-right: 0;
}

p {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  margin-top: 0;
}

img[class] {
  width: 100%;
}

.original-image {
  margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="original-image">
<p>Orjinal Resim <br> (arka plan rengi kırmızı)</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 50% 50%</p>
<img class="image image--center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 100% 150%</p>
<img class="image image--bottom-right" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 0 150%</p>
<img class="image image--bottom-left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 0 0</p>
<img class="image image--top-left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 50% 120%</p>
<img class="image image--up" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 50% -20%</p>
<img class="image image--down" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 120% 50%</p>
<img class="image image--left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: -20% 50%</p>
<img class="image image--right" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
<div class="container">
<p>object-position: 140% 90% <br>(arka planda resim var)</p>
<img class="image image--background-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> 
</div>
</body>
</html>

Kodeks Editör

Nesne Pozisyonu - (object-position)

"Nesne Pozisyonu - (object-position)" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Nesne Pozisyonu - (object-position)

"Nesne Pozisyonu - (object-position)" 0 Yorum yapıldı.

Yorum Gönder