Border around Image

时光毁灭记忆、已成空白 提交于 2020-02-06 04:24:10

问题


I want to put border around regular size image using php. I m wondering that i found border for text to image but not for simple images. The border width may be changeable. Please help


回答1:


The img element has by default a border attribute http://www.w3schools.com/tags/tag_IMG.asp Not a php expert but I would also opt for having a dynamic var inside of the tag itself so that it is fully flexible




回答2:


I would not manipulate the images using GD or imagemagick but instead put a [css border][1] on the image or a div behind the image that's slighly bigger than the image.

Either you put a border on every picture using css :

img { border: 2px solid #000; }

Or you can define some border classes likes this :

.border1 {border: 1px solid #000}
.border2 {border: 2px solid #000}
.border3 {border: 3px solid #000}

and then use on your images :

<img src="..." class="border1"></img>

or

<img src="..." class="border3 "></img>

edit : if you were using scss/sass you could even do something like :

@for $i from 1 through 10 {
   img.border_#{$i} { border: #{$i}px solid #000; }
}

Sass rocks !

About the colors :

.bMainColor{border-color:#ff0000;}
.bSecColor{border-color:#00ff00;}
.bThirdColor{border-color:#0000ff;}

and on the img tag :

<img src="..." class="border1 bMainColor"></img>

I guess there are so many ways to use css :)

References about borders :

http://www.w3.org/TR/CSS2/box.html#border-properties

http://reference.sitepoint.com/css/bordersoutlines

http://www.w3schools.com/css/css_border.asp




回答3:


Use ImageMagick in php , it has direct command to add border to images, see

http://www.imagemagick.org/Usage/crop/#border




回答4:


if you want it to be changeable, make a textbox, where you enter the pixel size of the border and then a submit button.. Use post or get, what ever you like..

BUT, this WILL only be working aslong as your not changing page, unless you make this dynamic somehow..

<img src="..." style="border:<? $_POST['pixel']; ?>" />

otherwise, use @dwarfy's solution..



来源:https://stackoverflow.com/questions/4688300/border-around-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!