FullScreen Images prevent Stretching

Question

I am trying to make images full screen images ( NOT BACKGROUND ) but it is stretching on large screen size.

Is there any way to make it stays the same regardless the screen size?

I know there is a way to make background image full screen by using cover size and width/height 100% but it is possible to do it with images? Inline images?

Check it by zooming out, The picture on slider stretch.

Thank you, Any help will be highly appreciated!

No, I am trying to make the image not to stretch on screen size and remain the same like: http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php but not background! — user3801231, Jul 03 '14 at 11:01
@ Niet the Dark Absol yes but if it stays the same on zoom out then it would be awesome! — user3801231, Jul 03 '14 at 11:02

score 0 · Accepted Answer · answered Jul 03 '14 at 11:01

0

Just keep the height empty and set width to 100%. If you need a fixed height use background image but with 'cover' not 100%

http://www.w3schools.com/cssref/css3_pr_background-size.asp

answered Jul 03 '14 at 11:01

Tomas Randus

2,127
4
29
38

I used your method it worked but now the text box goes to right on zoom out. any idea to make it in same area? – user3801231 Jul 03 '14 at 11:25
In exact your case use: margin-left: -409px; left: 50%; For the div .orbit-caption This is generally this method: http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div With a negative margin – Tomas Randus Jul 07 '14 at 07:43

score 0 · Answer 2 · answered Jul 03 '14 at 11:02

0

One way is to place your image in a div of constant size like demonstrated below:

<div style="height:100px; width:100px"><img src="etc/etc.png"></div>

answered Jul 03 '14 at 11:02

Rai Ammad Khan

1,521
2
14
26

Yes, But in this way the image go away from it position on zoom out – user3801231 Jul 03 '14 at 11:05
use position:fixed or position:absolute to fix it – Rai Ammad Khan Jul 03 '14 at 11:06

FullScreen Images prevent Stretching

2 Answers2