HTML resim ölçekleme

114

HTML img etiketleriyle bazı büyük resimleri görüntülemeye çalışıyorum. Şu anda ekranın kenarından çıkıyorlar; bunları tarayıcı penceresinde kalacak şekilde nasıl ölçeklendirebilirim?

Veya bunun mümkün olmadığı muhtemel durumda, en azından "bu görüntüyü normal genişliğinin ve yüksekliğinin% 50'sinde göster" demek mümkün müdür?

Genişlik ve yükseklik öznitelikleri görüntüyü deforme ediyor - anlayabildiğim kadarıyla bunun nedeni, kabın son bulabileceği niteliklere atıfta bulunmaları ve görüntüyle ilgisiz kalmalarıdır. Piksel belirtemiyorum çünkü her biri farklı piksel boyutuna sahip geniş bir resim koleksiyonuyla uğraşmam gerekiyor. Maksimum genişlik çalışmıyor.

html image-scaling

— rwallace
kaynak

4

Css ile büyük resimler göndermenin ve küçültmenin tavsiye edilmediğini unutmayın . Bant genişliğinden tasarruf etmek ve sayfayı daha duyarlı hale getirmek için aynı görüntünün farklı sürümlerine sahip olmak daha iyidir (görüntü küçük görünse bile, tam görüntü gönderilecektir).

— Esteban Küber

1

rwallace, .net veya PHP veya saf HTML dışında bir şey mi kullanıyorsunuz?

— Dorjan

1

Görüntü dosyası boyutu önemli değil, bant genişliği konusunda tutumlu olmayı düşündüğüm durumda herhangi bir gereklilik yok. PHP kullanıyorum, ancak HTML çözümü çalışıyor.

— rwallace

135

Yalnızca widthveya öğesini ayarlayın ve heightdiğerini otomatik olarak ölçeklendirecektir. Ve evet bir yüzde kullanabilirsiniz.

İlk bölüm yapılabilir, ancak JavaScript gerektirir, bu nedenle tüm kullanıcılar için çalışmayabilir.

— RiddlerDev
kaynak

7

Lütfen, lütfen bunu büyük resimlerde yapmanın uzun indirme sürelerine sahip olmaması gereken sayfalar için uzun indirme sürelerine neden olacağını unutmayın. Mümkünse görüntüyü gerçekten yeniden boyutlandırmak her zaman daha iyidir.

— ceejayoz

Teşekkürler! Görünüşe göre, yalnızca genişliği ayarlama çözümünüz yalnızca doğru ölçeklendirme için işe yaramıyor, aynı zamanda ilk kısmı yalnızca genişliği% 100 olarak ayarlayarak yapıyor.

— rwallace

2

@ceejayoz Katılıyorum, ama sorduğu bu değil.

— RiddlerDev

@ceejayoz Merak ediyorum, neden daha uzun sürüyor? Her iki durumda da görüntülendiğinde yeniden boyutlandırılması gerekmez mi? Yoksa gerçek resmi manuel olarak yeniden boyutlandırıp dosyayı değiştir mi diyorsunuz?

— Abdul

2

@Abdul 3,000x3,000 piksellik 5MB'lik bir görselin web sitenizdeki 100x100 piksellik bir alanda kullanılmaması gerektiğini söylüyorum.

— ceejayoz

18

css yeterlidir:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

— Selvadurai Handeeban
kaynak

9

Bu sorunun uzun zamandır sorulduğunu biliyorum ama bugün itibariyle basit bir cevap:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

Burada vw kullanımı , genişliğin görünüm penceresinin genişliğinin% 55'ine göre olduğunu söyler.

Günümüzde tüm büyük tarayıcılar bunu desteklemektedir.

Bu bağlantıyı kontrol edin .

— Dimitri de Jesus
kaynak

1

vwbenim için bir cankurtarandı, diğer yöntemler eldeki görüntü için işe yaramadı.

— caram

6

Javascript gerekmez.

IE6 Internet Explorer 6

Yüzde, yalnızca bir öğenin genişliği için çalışır, ancak height:100%;doğru kod olmadan çalışmaz.

CSS

html, body { height:100%; }

Ardından yüzde kullanmak düzgün çalışır ve pencere yeniden boyutlandırıldığında dinamik olarak güncellenir.

<img src="image.jpg" style="height:80%;">

Genişlik özelliğine ihtiyacınız yoktur, tarayıcı penceresi boyutu değiştikçe genişlik orantılı olarak ölçeklenir.

Ve bu küçük mücevher, görüntünün büyütülmesi durumunda, (aşırı) bloklu görünmeyecektir (enterpolasyon yapar).

img { -ms-interpolation-mode: bicubic; }

Donanımlar bu kaynağa gider: Ultimate IE6 Cheatsheet: 25+ Internet Explorer 6 Hataları Nasıl Düzeltilir

— -Tanımlanmamış 1
kaynak

6

Ekleme max-width: 100%;için imgetiketi benim için çalışıyor.

— Ralph David Abernathy
kaynak

2

Bence en iyi çözüm, görüntüleri komut dosyası aracılığıyla veya yerel olarak yeniden boyutlandırmak ve yeniden yüklemek. Görüntüleyenlerinizi ihtiyaç duyduklarından daha büyük dosyaları indirmeye zorluyorsunuz

— riotera
kaynak

0

Bunu nasıl yapacağımı bilmemin en iyi yolu:

1) kaydırmak için taşmayı ayarlayın ve bu şekilde görüntü içeride kalır, ancak bunun yerine görmek için kaydırabilirsiniz

2) daha küçük bir resim yükleyin. Artık yüklerken orada çok sayıda program var (bunu yapmak için PHP veya .net gibi bir şeye ihtiyacınız olacak), otomatik ölçeklendirmeye sahip olabilirsiniz.

3) Onunla yaşamak ve genişliği ve yüksekliği ayarlamak, ancak bozuk görünmesine neden olacak, ancak doğru boyut yine de kullanıcının tam boyutlu resmi indirmek zorunda kalmasına neden olacaktır.

İyi şanslar!

— Dorjan
kaynak