HTML 5 görüntü uyarlamalı ekran img web sayfası için orantılı ölçekleme kodu HTML XNUMX

Artan mobil internet nedeniyle,Wechat pazarlamaCep telefonlarının popülaritesi arttıhayatolmazsa olmaz araç.

Bir istasyon inşa etşablon, kullanılması tavsiye edilirWordPressUyarlanabilir tema:

CSS görüntü uyarlamalı ne anlama geliyor?

CSS görüntüsü uyarlamalı, html web sayfasındaki görüntüleri CSS kodu aracılığıyla yapmak için şu anlama gelir:

Sonraki,Chen WeiliangSizlerle CSS img orantılı ölçekleme kodunu paylaşacağım ^_^

CSS görüntü yüksekliği ve genişliği uyarlamalı kod

HTML'ye resim ekle:

Görüntünün genişlik ve yükseklikte sabit kalmak yerine ekranın küçük boyutuna uyum sağlamasını istiyorsanız.

Aşağıdaki kodu WordPress temanızın style.css dosyasına ekleyebilirsiniz ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

buradaki ifademax-widthmaksimum genişlik kuralı

• tüm görüntülerin maksimum %100 oranında görüntülendiğinden emin olmak için (yani, yalnızca kendi görüntüleri kadar büyük olarak görüntülenebilirler).
• Bu noktada, görüntüyü içeren öğe (örneğin, görüntüyü içeren gövde veya div) görüntünün doğal genişliğinden daha küçükse, görüntü maksimum kullanılabilir alanı dolduracak şekilde ölçeklenir.

width:auto;otomatik genişlik anlamına gelir

\9 Hack css yazmanın bir yoludur.

• Bu şekilde normal css koduna "\9" eklenir, sadece IE tarayıcı tanıyabilir, diğer tarayıcılar bu ifadeyi yok sayar.
• Bu, uyumlu tarayıcıların amacını etkinleştirerek tarayıcı farklılaşmasını sağlayacaktır.

Neden genişlik kullanmıyorsunuz: %100?

Görüntülerin otomatik olarak ölçeklenmesini sağlamak için daha yaygın olarak kullanılan genişlik özelliklerini de kullanabilirsiniz, örn.width：100％.

Ancak bu kural burada geçerli değildir.

• Çünkü bu kural onu kabı kadar geniş gösterecektir.
• Kapsayıcının görüntüden çok daha geniş olduğu durumlarda görüntü gereksiz yere uzar.

注意 事项

CSS seçicileri nedir? classve id arasındaki fark nedir?Aşağıdaki öğreticiler ▼ hakkında konuşuyor

CSS seçici sınıfı ve kimliği arasındaki fark nedir? HTML'de id ve sınıf kullanımı

CSS seçici sınıfı ve kimliği arasındaki fark nedir? HTML'de id ve class kullanımı Chen Weiliang şu anda SEO yapıyor ve web sitesinin WordPress temasını optimize ediyor.Daha önce bazı temel HTML ve CSS bilgilerini öğrenmiş olmama rağmen bir süredir kullanmadım, özellikle CSS kısmı...

Mobil web sitesi, sayfaya uyumlu MP4 videoyu nasıl oynatıyor?Lütfen aşağıdaki linke tıklayın ▼

H5 web sayfası MP4 sayfaya nasıl uyum sağlar?Mobil web sitesi video html kodunu oynatır

Video pazarlama, çevrimiçi pazarlamanın ayrılmaz bir parçasıdır: birçok çevrimiçi promosyon uygulayıcısı, trafiği artırmak için genellikle "viral pazarlama" ile birlikte video kullanır.WeChat pazarlaması video pazarlamasıyla birleştirilirse, yeni medyanın ve sosyal e-ticaretin metin yazarlığı dönüşüm oranını daha da artırabilir.Birçok arkadaşım var...