Resizing images

2019-05-17 08:49发布

站内问答 / PHP
459 8 4

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

If an image is bigger than the field it stretches my tables and looks bad. Is there any way to re size the image if its too big?

Sorry for my poor English and thank you for reading

Edit: The thing is that it's not only the image. It's the image and the text "the big text".

Respectfully, Tom

8条回答
混吃等死
2楼-- · 2019-05-17 09:16

PHP...

You can re-size images with the gdlibrary (See: PHP/GD - Cropping and Resizing Images), but that may be complicated if you're not already pretty familiar with PHP.

jQuery/Javascript

A plugin exists that can dynamically resize images (stretching the image itself). Check out maxSide: http://css-tricks.com/maxside-jquery-plugin-and-how-to/

CSS...

A quick-solution for keeping the signature imaged tamed is to restrict their overflow with css:

<img src="randomimage.png" />

Becomes

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

With the following CSS:

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

This will hide large images, rather than allowing them to distort your content.

查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
3楼-- · 2019-05-17 09:19

Using css 

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

This works in all the browsers I have tested

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
4楼-- · 2019-05-17 09:22

For a forum I administered, we placed the signature block in a div with overflow: hidden set in the CSS. That way, a user who put in a massive 600x300 signature image and a paragraph of text gained no benefit from doing so - only the 400x90 area specified showed up. Seemed to work well.

查看更多
0人赞 添加讨论(0) 举报
Bombasti
5楼-- · 2019-05-17 09:24

Using Javascript:

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

Example HTML:

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

EDIT: It looks like John T also posted this way of doing it... Sorry I didn't notice it before posting.

查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
6楼-- · 2019-05-17 09:25

As JoshL and John T pointed out, you can use php's built in image handling support to dynamically alter images. In your situation, you could simply make a php script that will load the image, resize it to appropriate dimensions, serve it and save a cached copy of the resized image to avoid processing overhead on subsequent requests.

You would end up using something like this in your HTML code

<img src="img.php?file=foobar.jpg">
查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
7楼-- · 2019-05-17 09:30

You would probably first want to take the images dimensions. Then you can maintain an aspect ratio, while setting a new size via the simple HTML height and width attributes for the img tag.

You may also want to consider hosting signatures locally. When a user uploads an image, you can do all of the resizing then via GD Library.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)