Görüntüyü, oranlarını korurken saf HTML/CSS'de nasıl yeniden boyutlandırılır?

Question

Bir resmini HTML/CSS kullanarak (yani sunucu kodu) kullanarak, oranlarını koruyarak ve bir kırpma efekti elde ederek nasıl yeniden boyutlandırabilirim. Ayrıntılar: Belirtilen bir genişliğe yeniden boyutlandırmak, oranlarını korumak ve yükseklik belirtilen bir değere kırpmak için belirtilen bir değerden daha büyükse, ister misiniz?

Aslında, bazı sunucu kodlarını kullanarak bunu nasıl yapacağımı biliyorum, ancak bunu yapmak istemiyorum. Farklı bir dosya referansı kullanarak ima eder ve resme <img src="picture.php" /> gibi bir şey atıfta bulunur. Resmi, görüntüleyen sayfada aynı şekilde işlemem gerekiyor.

Bana "rahatsız edici" olan şey, görüntü üstbilgisini göndermem gerektiğidir, böylece sayfada başka hiçbir şey görüntülenmeyecek.

Böyle bir şey yapmanın bir yolu var mı? Belki saf HTML/CSS'den? : P

Ben (yani "mahsul" şey hariç) böyle bir şey yapar bir işlevi yapılmış ve sadece width="" height="" döner ve bu <img src="image.jpg" resize("image.jpg") /> gibi kullanabilirsiniz, ama ben mahsulün bunu nasıl alamadım .. . tarayıcıları yorumlamak için onun content-type başlığındaki bağlıdır çünkü aynı dosyada bir görüntü ve HTML oluşturamazsa

Answer 1

Tamam, bu yüzden bunu html/css'den yapmanın bir yolunu bulmayı başardım.

önce benim görüntü istenilen genişlikte (oranlarını tutarak) ve daha sonra bulundukları div ve setting overflow to hidden için sabit bir yüksekliğe verilmesine boyutlandırılır

<div style="width:200px;height:200px;overflow:hidden;" > 
    <img src="image.jpg" width="200px" height="auto"> 
</div> 

sadece görüntülemek için komut dosyası yapar: Bütün fikir olduğunu "extraheight" kurtulmak oldu Resmin istenen kısmı.

Answer 2

teşekkürler. Bir görüntü içeriğinin tipi image/* (resim formatı için yerine *) ise

bir HTML belgesi content-type başlık genel olarak text/html ayarlanır. Görüntü verilerini bir HTML belgesine yazdırabilirsiniz, ancak tarayıcı bir görüntüden ziyade görüntüyü text/html olarak yorumlaması gerektiği için içeriğinin bozuk olması gerekir.

<img> etiketinizi, anlattığınız gibi bir PHP dosyasına bağlamanız gerekir. Bunun neden bir sorun oluşturduğundan emin değilim; Bu konuda gitmek için doğru yoldur. Tabii ki, HTML'deki boyutlarını değiştirerek görüntüyü kırpabilirsiniz, ancak yapmanızı önermiyorum.

<?php 
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />'; 
?> 

nedenle bu yardımcı resized görüntü zaten oluşturulmuş olup olmadığını kontrol veya yenisini oluşturur:

Answer 3

gibi yardımcı oluşturun. ve her iki durumda da yeni resme uygun URL'yi döndürür.

Answer 4

ImageMagick'in "yeniden boyutlandırmak için yeniden boyutlandır" ve "yeniden boyutlandırmak için yeniden boyutlandırma" yöntemlerini desteklediğini düşünüyorum.

img etiketinizi çıktı arabelleğine yazmadan önce, görüntüyü ortaya çıkarılan dosya adına kaydedin ve bu görüntünün genişliğini ve yüksekliğini sizin için belirleyelim.

Ayrı bir dosyayla çalışmak istemiyorsanız, görüntü verilerinin satır içi olmasını istiyorsanız, yeni web tarayıcılarının desteklediği data-uri method'u deneyin. Bu, html dosyasındaki görüntünün ikili veri akışını satırlara ekler, böylece gömülür.

Answer 5

Görüntüleri anında yeniden boyutlandırmak ve kırpmak için phpThumb kullanabilirsiniz. JPEG, PNG, GIF, vb. Resimlerden küçük resimler oluşturmak için GD kütüphanesini kullanır.