How to add a picture border to the picture and adapt the picture size_html/css_WEB-ITnose

http://www.art9.cn/ban-ma-tu-framed-1930.html#hk

Similar to this effect of selecting a picture frame, the author usually works in PHP, this I have been thinking about this effect for a day, but I am surprised. Please give me some advice

Reply to the discussion (solution)

Oops

Make the picture Take it down and process it, leaving only the border, just use it as the background

Get the picture down and process it, leaving only the border, just use it as the background

There are a lot of different sizes The picture is obviously not feasible to draw manually

What’s the point? We are in business, and the type of picture frame is known (optional)
All you have to do is assemble a picture using GD

What is this? I am in business, so the frame type is known (optional)
All you have to do is assemble a picture using GD

I know the basic operations of gd, but look at me The first frame in the link, I really can’t figure out how to use the gd library to make that kind of texture
It’s not stretched, if it’s splicing, I can’t figure out how the original frame was designed

Cut down the image and process it, leaving only the border as the background

There are a lot of images of different sizes, which need to be done manually It is obviously not feasible to use pictures
Background images in higher versions of browsers already support zooming...
Even if you want to be compatible, there is a way. Use the img tag to load the background image, set the container of the background image to relative positioning, and then move the background image to The displayed image can be absolutely positioned and centered on the background img