Bir resim ana içerik sütunundan daha genişse (genellikle küçük ekranlarda görülür) DevSite, resmi otomatik olarak sütunun genişliğine sığdırır. Ancak resimde hem width hem de height özellikleri ayarlanmışsa yalnızca genişlik yeniden boyutlandırılır ve bu da resmin bozulmasına neden olur. Bu nedenle, height ayarını görselde yapmayın. Bu, resmin yüklenmesi yavaşsa (atlamaya neden olur) sayfanın yeniden çizilebileceği anlamına gelir. Ancak bu, ekrana sığmayan bir resimden daha iyidir.
Bir resme class="screenshot" uygulayarak resme, yakındaki metinden farklı bir kenar verebilirsiniz. Bu, genellikle beyaz arka planlı ve sayfanın geri kalanında kaybolan ekran görüntüleri için kullanılır. Buna ihtiyacı olmayan resimler için kullanmayın.
Metnin yanında yüzen
Sağdaki resimde class="attempt-right" de vardır. Bu, resmi büyük ekranlarda sağa doğru kayan bir şekilde gösterir ancak küçük ekranlarda, tabletlerde ve daha küçük cihazlarda resmi dikey düzene zorlar. class="attempt-left" de kullanılabilir. attempt-left ve attempt-right öğelerini birlikte kullanmak için attempt-left öğesinin önce geldiğinden emin olun.
Yüzen resimler sütun genişliğinin% 50'sini aşamaz. Bu durumda, yeniden ölçeklendirilirler.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Hem resim hem de altyazı içeren bir <figure> gibi diğer öğeleri yüzdürmek için aynı sınıfları kullanabilirsiniz:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Yüzen metni temizleme
Metnin, yüzen bir öğenin etrafında sarmalanması ve doğal genişliğinde gösterilmesini önlemek için, etkilenen ve yüzen öğeyi takip eden öğelere clear sınıfı ekleyebilirsiniz.
<p class="clear">Hello world.</p>
clear sınıfını içeren örnek
Bu örnekte, ikinci paragraf bir clear sınıfı içeriyor.
Bu paragraf, yüzen resmin etrafını sarar . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bu paragrafın net bir sınıfı vardır ve yüzen resmin etrafına sarmalanmaz. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
clear sınıfı olmayan örnek
Bu örnekte, her iki paragraf da yüzen resmin etrafına sarılır.
Bu paragraf, yüzen resmin etrafını sarar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bu paragraf, yüzen resmin etrafını sarar. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Koyu tema resimleri
DevSite, koyu tema etkinleştirildiğinde görüntülerin görünümünü değiştirmek için resimlere uygulanabilecek küçük bir sınıf adı grubu sağlar.
Resim karartma
SVG dosyaları hariç tüm resimler, koyu temada varsayılan olarak biraz koyulaştırılır.
Koyu tema etkinken bir resimdeki varsayılan karartmayı kaldırmak için resme filtre yok sınıfı ekleyin:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Resmi ters çevirme
Siyah veya koyu tek renkli renk paletine sahip resimler için koyu temada beyaz/açık renkte görünmesi amacıyla resme invert sınıfı ekleyin:
<img src="/site-assets/logo-github.png" class="invert" alt="">
_index.yaml sayfası için bir satır öğesinin classname alanına invert ekleyin:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Koyu tema varyantı için ayrı resim
Yalnızca koyu tema etkinleştirildiğinde gösterilecek ayrı bir resim sağlamak istiyorsanız mevcut <img> öğesini bir <picture> öğesine sarın ve koyu tema varyantı için bir <source> öğesi ekleyin.
Aşağıdaki örnekte, bir <picture> öğesi içinde Google marka işareti için iki SVG dosyası bulunmaktadır. Koyu tema devre dışı bırakıldığında <img> öğesindeki resim dosyası gösterilir. Bu resimde, dört Google marka rengi içeren marka logosu gösterilir. Koyu tema etkinleştirildiğinde, <source> öğesindeki resim dosyası gösterilir. Bu dosyada logo tamamen beyazdır ve marka renkleri yoktur.
Örnek
Kod
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Notlar
Koyu tema, bir özellik işareti aracılığıyla etkinleştirildiğinden <source> öğesinin özellikleriyle ilgili olarak lütfen aşağıdakileri göz önünde bulundurun:
<source> öğesi, DevSite'in ön ucunun medya özelliğini ve değerini kullanıcı tarafından seçilen koyu tema seçeneğine (light, dark veya device) göre güncellemesi için bir kanca sağlayan bir devsite-dark-theme sınıfı içermelidir.
medya özelliği, değerinde bir (prefers-color-scheme: dark) medya sorgusu içermelidir.
Medya özelliğinde media sorguları içeren <source> öğeleriniz varsa mevcut medya sorgularını and (prefers-color-scheme: dark) ile ekleyin veya medya özelliği değeri (prefers-color-scheme: dark) olan yeni bir <source> öğesi ekleyin. media sorgusu ve değeri, kullanıcı tarafından seçilen koyu tema seçeneğine bağlı olarak kaldırılır veya değiştirilir.
srcset özelliğindeki koyu temalı varyant resminin dosya adı teknik olarak herhangi bir şey olabilir ancak mevcut resmin dosya adına -dark-theme eklenmesi önerilir.