Yeniden boyutlandırma

7 Cevap php

I'm working on a forum application in PHP. In signature field I have
"<img src='randomimage.png'><br>bla blah"

Bir görüntü alanında daha büyük ise, o benim tabloları uzanır ve kötü görünüyor. Onun çok büyük eğer boyut görüntüyü yeniden için herhangi bir yolu var mı?

Benim kötü İngilizce için üzgünüm ve okuma için teşekkür ederim

Edit: şey görüntü değil sadece olmasıdır. Bu görüntü ve metin "büyük bir metin" bulunuyor.

Saygılarımızla, Tom

7 Cevap

PHP...

Ama zaten PHP ile oldukça aşina değilseniz o karmaşık olabilir: gdlibrary ile yapabilirsiniz yeniden boyutlu görüntüler (PHP/GD - Cropping and Resizing Images bakınız).

jQuery/Javascript

Bir eklenti dinamik (görüntüyü kendisi germe) boyutlandırmak görüntüler olduğunu bulunmaktadır. MaxSide Çıkış: http://css-tricks.com/maxside-jquery-plugin-and-how-to/

CSS...

Tamed görüntülü imza tutmak için hızlı bir çözüm css ile taşması sınırlamak için:

<img src="randomimage.png" />

Oldu

<div class="sigBox"><img src="randomimage.png" /></div>

Aşağıdaki CSS ile:

div.sigBox { overflow:hidden; width:50px; height:50px; }

Bu büyük resimler yerine, onları içerik bozmaya izin gizler.

Muhtemelen ilk görüntüleri boyutlarını almak isterim. Basit HTML height ve width img etiketi nitelikleri aracılığıyla yeni bir boyutunu ayarlarken Sonra, bir boy oranını koruyabilirsiniz.

Ayrıca yerel imzaları hosting düşünebilirsiniz. Bir kullanıcı bir görüntü yükler zaman, GD Library aracılığı ardından yeniden boyutlandırma tüm yapabilirsiniz.

<img src="/img/foo.png" height="100" width="100" />

Yükseklik ve Genişlik piksel vardır. Bu size (daha sonra belirtilen boyutları etrafında "squishes" tam görüntü indirir) HTML görüntüyü yeniden boyutlandırmak istiyorsanız.

Programlı fiziksel görüntü dosyasını değiştirmek isterseniz, PHP GD fonksiyonları kontrol: http://us.php.net/manual/en/ref.image.php

Ben yönetilen bir forum için, overflow: hidden CSS ayarlanmış olan bir div olarak imza bloğu yerleştirilir. Bu şekilde, büyük 600x300 imza görüntü koymak ve metnin bir paragraf bunu yaparken hiçbir yarar elde kullanım - sadece belirtilen 400x90 alanı gösterdi. Iyi iş gibi görünüyordu.

JoshL ve John T işaret ettiği gibi, sen php dinamik olarak görüntüleri değiştirmek için destek taşıma imaj inşa kullanabilirsiniz. Sizin durumunuzda, sadece, resmi yüklemek uygun boyutlara yeniden boyutlandırmak, bu hizmet ve sonraki istekleri işleme yükü önlemek için boyutlandırılan görüntünün bir kopyasını önbelleğe kurtaracak bir php script yapabilir.

Eğer HTML kodu böyle bir şey kullanarak sona ereceğini

<img src="img.php?file=foobar.jpg">

Javascript kullanarak:

function changeSize(imageOrTextId, tableId)
{
    if (document.getElementById(imageOrTextId).width > document.getElementById(tableId).width)
    {
    	document.getElementById(imageOrTextId).width = document.getElementById(tableId).width;
    }
}

Örnek HTML:

<body onload="changeSize('image1', 'table1')">
    <table id="table1" width="400" height="400">
    	<img src="randomimage.png" id="image1" />
    </table>
</body>

EDIT: John T, aynı zamanda bunu yapmanın bu şekilde yayınlanmıştır gibi ... Üzgünüm göndermeden önce bunu fark etmedi görünüyor.

Css kullanma

<img src="randomimage.png" style="max-width:100px;max-height:100px;" />

Bu test ettiğim tüm tarayıcılarda çalışır

etiketler