Unable to fit image

Hi

In an earlier post http://www.sitepoint.com/forums/showthread.php?1205251-Media-query-for-Samsung/page2

Paul OB helped me code my main page for mobiles through @media queries. At one stage, very kindly, he supplied me with code that transformed the image from full size to a reduced size that fitted the smaller screen.

.img-container {
	width:100%;
	padding-top:62.2%;
	position:relative;		
}
.img-container img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;	
}

It works fine.

Now, I tried to apply the same code to another, smaller page and it does not work.
The page is pintotours.net/Europe/Spain/foodBcn.html , which normally opens as a popup from pintotours.net/Europe/Spain/Barcelona.html

In the normal page for large screens, the ratio of the image dimensions has changed and looks bad. In the reduced width it is lwider than the reserved space for mobile.

I would be grateful if you could help.

Regards

UPDATE

I’v emanaged to get it to work, somehow…

However the aspect ratio of the image in the main full size page is different. It should be 600 x399 (as per the html) and instead it became 599x447, after some adjustment as it had gone up automatically to over 800px wide!

help…

Hi there qim,

your problem is caused by your resizing the 600 x 448 image in the HTML instead of your “GIMP” image editor. :unhappy:

[color=navy]
<div class="img-container"> 
<img title="Barcelona tapas" alt="Tapas in Barcelona" src="../images/tapas.jpg" [color=red]width="600" height="399"[/color]>
</div>[/color]

You are a very naughty boy. :-/

So you now know what you must do. :idea:

The CSS would then become…

[color=navy]
.img-container {
	width:100%;
	padding-top:[color=green]66.6%[/color];  /*  [color=purple]this is the aspect ratio - height to width[/color]  */
	position:relative;		
 }
.img-container img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;	
}[/color]

Go to it. :bouncy:

coothead

Got it!

Thanks

No problem, you’re very welcome. :daisy:

coothead

Hi coothead

I’m afraid it does not work, If I use
.img-container {
width:100%;
the image becomes too big and goes off the popup. This is possibly because it is a popup.

look at http://pintotours.net/Europe/Spain/foodBcn.html

But this is good enough for me as it is just a test.

Regards

Hi there qim,

your problem is caused by your use of “width:820px” here…

[color=navy]
div.box {
    border:solid 1px #CCCC66;
    background-color:#F1F1D4;
    [color=red]width:820px;[/color]	
    height:auto;	
    padding: 0 20px 10px 20px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border-width:5px;	
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }[/color]

You must change it to “max-width:820px” for this CSS…

[color=navy]
.img-container {
	width:100%;
	padding-top:66.6%;  /*  this is the aspect ratio - height to width  */
	position:relative;		
 }
.img-container img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;	
}[/color]

…to have your desired effect. :idea:

You don’t appear to have resized the image in question either. :goof:

Go to it. :bouncy:

coothead

Hi there qim,

Now, I tried to apply the same code to another, smaller page and it does not work.

I forgot to ask; are you aware that this…

[color=navy]
.img-container {
	width:100%;
	padding-top:66.6%;  /*  this is the aspect ratio - height to width  */
	position:relative;		
 }[/color]

…can only be used for images with identical aspect ratios?

And do you really know the purpose of the “padding-top” value?

You should know by now that the “C&P” method of coding,
without understanding, will invariably lead to further problems. :goof:

coothead