What the best way to make images responsive !

[dauruk0512]

Hi again, thanks for some respond in past question really feel helpfull to discuss here.

 

let me describe my problem i set images in front end for original 383 px * 533px but then realize that my client has photo 2024px * 2559px,

 

succesfuly make it responsive but not good looking sprawl but the point is really near with responsive,

 

here is my old css for 383 px * 533px

/*large desktop*/.img-header {  height:auto;  width:250px;  top: 0px;  position: absolute;}/*landscape tablet*/.img-header {  height: 240px;  width:180px;  top: 10px;  position: absolute;}/*Potrait tablet*/.img-header {  height: 210px;  width:160px;  top: 20px;  position: absolute;}/*landscape phone*/.img-header {  height: 200px;  width:160px;  top: 10px;  position: absolute;}/*portrait phone*/.img-header {  height: 130px;  width:110px;  left:0px;  margin-top:-20px;  margin-bottom:10px;  position: absolute;}

so any idea to make this images to responsive with original size from my client, what should i use for keep responsive used % or px,

any link or explanation will be apreciate, Thanks

 

 

Freddy

[Ingolme]

Set the max-width, rather than the width, then set the height to auto.

 

This should work:

.img-header {  max-width: 100%;  height: auto;}

I would not recommend having an image as large as 2024x2559 on a website simply because it will take forever to download and most people won't look at it in its native resolution.

 

You should resize it to something smaller for the page and, if you really need to show people the full image, have a direct link to it from the web page.

[dauruk0512]

well i have been searching then find out mostly answer like you said but how can i make if use in bootsrap and make it in div class="c0l-md-12" it give me 100%,

 

cause not only image in header there are h1. h2. h3 and etc, so how about your trick for me, remind you not only col-md-12 ?

 

yes i have been resize it by photoshop but still dont get it about this concept

.img-header {  max-width: 100%;  height: auto;}

if height make me sense, but the width is not answer, will you expalantion width:100% and every col in bootsrap,

 

 

Really big thanks Moderator

[Ingolme]

When you set max-width to 100% you are telling the image that it is not allowed to be any wider than the width of the box that contains it.

 

You have to put that style right on the <img> element itself, not on its container or something else.

 

If you're using Bootstrap, the img-responsive class already does that for you.

[dauruk0512]

Hm i'm getting close with this issue !

 

let me give simple code

<div class="col-md-12"><img src="here is image" class="img-responsive img-header"><h1>This is H1</h1><h2>This is H2</h2><h3>This is H3</h3></div>

i've always use img-responsive in my images but it doesn't give me sense without setting width and height

 

 

 

please if you don't mind elaborate about your technic in my simple bootsrap ?

 

i mean should i make with and height in every screen css like i said in my thread !

 

Thanks for your elaborate

Edited June 27, 2015 by dauruk0512

[Ingolme]

You must not set the width or height if you're using the img-responsive class. It will automatically adapt to fit within the available width.

 

If you specify a width you will override the responsive part of the code.

[dauruk0512]

Oh i get it !

 

But the original size will be keep in that images, isn't ?

 

as developer i should remind users should upload with criteria width and height to make images not to big or to small in front end, i hope you understand what i'm talking about this ?

 

bye the way my english is not hard to understand to comunicate with me, Moderator ?

Edited June 27, 2015 by dauruk0512

[Ingolme]

The image file itself is still the same size. It is just resized to fit within the screen.

 

As a developer, it's usually your responsibility to resize the images that your clients provide to you before putting them on the website.

 

I can understand your English.