Resim boyutu html cinsinden belirtilmeli mi?

Herhangi bir görüntünün (genellikle yükleme sırasında uygun miktarda alan tahsis edildiğini) sabit kod genişliğinin ve yüksekliğinin kodlanmasının uzun zaman önce en iyi uygulaması olduğunu hatırlıyorum, ancak şimdi çoğu insan yüksek hızda ve genellikle daha dinamik olan şeylerde, bunun için en iyi uygulama nedir ? Hala herhangi bir içerik görüntüsünün html ile ayarlanmış satır içi boyutta olması tercih edilmekte midir?

1

8 cevap

Boyutu HTML niteliklerini kullanarak mı yoksa bir stil sayfasında mı ayarladığınız önemli değildir, ancak yine de resimler için boyutu belirtmeniz gerekir.

Günümüzde görüntüler çok daha hızlı yüklense de, görüntülenen sayfa ile görüntüler arasında hala gözle görülür bir gecikme var. Görüntüler yüklenirken sayfanın düzeni değiştiğinde hala rahatsız edicidir.

2
katma

Wordpress Stack Exchange'de ve ayrıca Webmaster Stack'ta benzer bir soruyu yanıtladım. Daha fazla kişiye açıklık getirmek ve yardım etmek amacıyla buraya gönderiyorum. (Yöneticiler/moderatörler: Buna izin verilmiyorsa, yardım etmenin doğru yolunu bana bildirin).

gerçekten, html'de genişlik ve yükseklik belirtmeniz gerektiği anlamına gelmez. Bunun anlamı, uygun bir alan ayırmanız gerektiği ve görüntü yüklendiğinde, tarayıcının sayfayı yeniden akıtması ve yeniden boyaması gerekmez.

     

Ayrıca, boyutları kodlarsanız, tepki veren davranışları yitirir. Mizanpajınız yanıt vermiyorsa sorun değil, ancak biraz yanıt vermek istiyorsanız, sonuçları elde etmek için yalnızca CSS kullanabilirsiniz.

     

Çoğu zaman, hem genişlik hem de maksimum genişlik kullanarak: 100 iş yapacak, ancak bu yazı ilginç bir tekniğe sahiptir: maksimum genişlik kullanmak yerine:% 100, Padding kullanabilirsiniz -Bottom Hack :

     

"Tekniği kullanarak, yüksekliği genişliğe göre bir ölçü olarak tanımlarız. Dolgu ve kenar boşluğu bu gibi kendine has özelliklere sahiptir ve bunları içinde herhangi bir içeriği olmayan öğeler için en boy oranları oluşturmak için kullanabiliriz.   Dolgu bu özelliğe sahip olduğu için, dolum altını bir elemanın genişliğine göre ayarlayabiliriz. Ayrıca yüksekliği 0 olarak ayarlarsak istediğimizi elde ederiz. [...]

     

Bir sonraki adım, kabın içine bir görüntü yerleştirmek ve kabı doldurduğundan emin olmaktır. Bunu yapmak için, görüntüyü kesinlikle kabın içine yerleştirmeliyiz, şöyle: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
2
katma

Evet, hala tercih edilir.

Birçok insan yüksek hızlı bağlantılarda değil ve mobil daha yaygın hale geliyor.

1
katma

CSS'i kullanmak her zaman en iyisidir

Görüntünün yüksekliğini ve genişliğini bu şekilde kodlayabilirsiniz

.myimg img {
width: 10px;
height: 10px;
}
0
katma
birçok insan CSS kullanmaya diyor. Resimlerin içeriğin bir parçası olduğu ve değişken boyutta olduğu durumlarda ne durumda? farklı görüntüler için özel bir sınıf oluşturabilir miyim? Sabit görüntü boyutu sınıfları var mı .. (dikey/yatay, farklı en boy oranları, küçük/orta/büyük) ya da html'de olanları boyutlandırmak mı?
katma yazar Damon, kaynak

Görüntü dosyanızın kendisi, özellikle yavaş yükleme konusunda endişeleriniz varsa, görüntülenmesini istediğiniz boyutta olmalıdır! 500X800 piksellik bir görüntünüz varsa, yalnızca 100X200 olarak göstermek istediğiniz, küçültün! dosya boyutu çok daha küçük olacak böylece daha hızlı yüklenecek :)

0
katma
genel olarak evet, birçok yeni yanıt veren teknik bunu gerektirmese de (yine de kesinlikle gerekenden daha büyük olmamasını istediğiniz halde)
katma yazar Damon, kaynak

Satır içi olmak zorunda değildir - harici CSS'de yapabilirsiniz. Bazı eski tarayıcılar, boyutu belirtmezseniz, sadece 0 piksel olarak kabul eder;

0
katma

Görüntünün yüklenmemesi durumunda veya belge yüklenirken beyaz boşluğun dahil edildiğinden emin olmak istiyorsanız, evet derdim. Ancak hayır, görüntüyü bu niteliklerle ölçeklendiriyorsanız/yeniden boyutlandırıyorsanız, tarayıcıdaki gereksiz yük ve görüntü bozulmasına neden oluyorsa.

0
katma

Çapraz tarayıcı uyumluluğu için tasarlıyorsanız, en azından görüntünün kendisi için CSS'nizde yükseklik ve genişlik belirtmelisiniz. Boyutlar özellikle görüntü için belirtilmemişse, FireFox, IE, Opera vb. Arasında tutarsızlık buldum. Her tarayıcının farklı sürümlerden bahsetmemesi nedeniyle, HTML Standartlarına uyumu farklı şekilde ele alması gerekir. Bazı tarayıcıların HTML tasarımcılarının amacını tahmin etmek için elinden gelenin en iyisini yapacağını, diğerlerinin ise ilk hatadan bahsettiğini gördüm. Web sitesinin tablet gibi bir mobil cihazdan görüntülenmesini düşünüyorsanız, piksel veya% 'ler yerine em boyutları da öneririm. Bununla birlikte, HTML5 ile oynamaya yeni başladım, bu nedenle resimlerle ilgili HTML5'teki farktan bahsetmiyorum.

0
katma