× İletişim Formu Nesne Uyumu - (object-fit) Arlina Design 7/18/2017 Etiketler : Blogger CSS Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); html { color: #949ba2; padding: 30px; background: #444 } body { font-family:'Source Code Pro', Monaco; margin: 0 auto } .object-fit_fill { object-fit: fill } .object-fit_contain { object-fit: contain } .object-fit_cover { object-fit: cover } .object-fit_none { object-fit: none } .object-fit_scale-down { object-fit: scale-down } p { font-weight: 200; font-size: 13px; margin-bottom: 10px; margin-top: 0 } img { height:120px; background: #f0c36d } img[class] { width:100% } .original-image { margin:0 20px 20px 20px; width:40% } .image { float: left; width: 40%; margin: 0 20px 20px 20px } .image:nth-child(2n) { clear:left } .image:nth-child(2n+1) { margin-right:0 } </style> </head> <body> <div class="original-image"> <p>original Resim</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: fill</p> <img class="object-fit_fill" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"/> </div> <div class="image"> <p>object-fit: contain</p> <img class="object-fit_contain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: cover</p> <img class="object-fit_cover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: none</p> <img class="object-fit_none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: scale-down</p> <img class="object-fit_scale-down" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Nesne Uyumu - (object-fit)" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Nesne Uyumu - (object-fit) Arlina Design 7/18/2017 Etiketler : Blogger CSS Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); html { color: #949ba2; padding: 30px; background: #444 } body { font-family:'Source Code Pro', Monaco; margin: 0 auto } .object-fit_fill { object-fit: fill } .object-fit_contain { object-fit: contain } .object-fit_cover { object-fit: cover } .object-fit_none { object-fit: none } .object-fit_scale-down { object-fit: scale-down } p { font-weight: 200; font-size: 13px; margin-bottom: 10px; margin-top: 0 } img { height:120px; background: #f0c36d } img[class] { width:100% } .original-image { margin:0 20px 20px 20px; width:40% } .image { float: left; width: 40%; margin: 0 20px 20px 20px } .image:nth-child(2n) { clear:left } .image:nth-child(2n+1) { margin-right:0 } </style> </head> <body> <div class="original-image"> <p>original Resim</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: fill</p> <img class="object-fit_fill" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"/> </div> <div class="image"> <p>object-fit: contain</p> <img class="object-fit_contain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: cover</p> <img class="object-fit_cover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: none</p> <img class="object-fit_none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> <div class="image"> <p>object-fit: scale-down</p> <img class="object-fit_scale-down" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd82oBv-Wn030FEvaGPVs6NBIEL9ybVEf7zEJHoKsgk7gIReZo2RhP3yPsUyez4paZEFNV1Vv-LdgOwyJtN3Y4nIiKSYapv2It1k9eBc1XclK9I_wUyzwhyphenhyphenF_Prk_-JrQYURvXFJH_Tw/s320/image.png"> </div> </body> </html>
Yorum Gönder