Give me an Idea to how to put this image up to another image responsiv

[Vahids]

look at this photo:
http://uploads.im/lK2Yb.png

It’s a letter packet in pink color and a letter paper in white color. I have a PNG image for Letter Packet.

letter paper must to have dynamic height because some mails are long.

both up side of letter packet have some space with letter page.

What is your Idea ?!
It must be responsive for desktop/ laptop/ mobiles.

[Jerba]

I’m not sure I completely understand what you’re trying to do, but correct me if i’m wrong.

You’re writing up mails and saving them as an image, which you will then display somewhere that needs to be responsive?

If the above is correct, there’s a few things you could do.

* Simple create various images which are scaled down / up and use media queries to display them accordingly in relation to the screen / viewport size.

* Don’t use images… Build the letter in HTML & CSS, it will be much more convenient.

* Use SVG (Scalable Vector Graphics), if you’re using a raster image type like .png etc, using dynamic dimensions will impact the image quality greatly.

https://www.youtube.com/watch?v=1KZxPoZk4Uw

I hope this helped!

—

If you’re looking for personal advice, If you’re capable, I’d highly advise you build the desired effect using HTMl and CSS. However, if you’re not comfortable using HTMl and CSS, use SVG, this will require you to continuously edit, export and replace the live image every time, but it will scale.

[Vahids]

No let me explain.
(sorry for my english)

I have this image file:
letter_packet.png (Pink in picture + yellow shape)

I should put this image file bottom of page.
I should write some text with a white background and put it standby in packet (like attached photo)
This white paper is extendible in height. for example some text are 50 lines and some mails are 3 lines.

Let me know if still is vague.

[Jerba]

So, essentially you’re drawing two images and stacking them right?

_________
|       |
|       |
|       | <- image 1 (the contents of the letter)
|       |
|       |
--------- 
|       | <- image 2 (the footer / envelope of the letter?)
|       |
---------

If so, again I’d suggest using HTML and CSS if you’re capable of doing so, or alternately use SVG images which will scale.

[Vahids]

Image 2 is correct,
image 1 is not image. It’s css background-color:white and some text (string text).

It’s hard to put paper (css background white div) inside image2 div.

I used bootstrap but paper size will protrusions in resizing different width.

Shouldn’t use bootstrap ?!

[Jerba]

Okay, right I see!

* Simple create various images which are scaled down / up and use media queries to display them accordingly in relation to the screen / viewport size.

* Don’t use images… Build the letter in HTML & CSS, it will be much more convenient.

* Use SVG (Scalable Vector Graphics), if you’re using a raster image type like .png etc, using dynamic dimensions will impact the image quality greatly.

All of those possible options will work fine here, if you can build the envelope etc in html and css then great! If not use an svg image as opposed to a raster image (png, gif, jpeg etc).

[Author]

Posts