1

I am trying to scale an image to 100% width of the div it is contained within (it is a responsive layout with the div changing size depending on window size, hence the need to scale the images).

This is my css:

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 10px;
    float: left;
}
@media (max-width: 520px) {
.container {
    width: 100px;
    height: 100px;
    margin: 5px;
}
}

.container img {
    width: 100%;
    }

The images resize fine using this css, EXCEPT when they are links. Like this:

<div class="container">    
<a href="http://andreaalice.com/index.shtml"><img src="images/image.jpg"></a>
</div>

Image links remain at their full size of 200px rather than scaling down to 100% of the div which is 100px.

Anyone know how I can get the linked images to scale?

user2419684
  • 33
  • 1
  • 3
  • Your code seems to work OK for me already. When the window width is less than 520px the image shrinks to 100x100px. Can you make a demo of the problem please? – andyb May 25 '13 at 06:33
  • Yes, the code you posted works fine, so something else in your styles is getting in the way. – ralph.m May 25 '13 at 08:16
  • @andyb You guys are right, this code seems to work so there must be something else getting in the way. I simplified it when I posted the question on here. I can't find what's causing the problem in my original files. I've uploaded a test version of the site here: http://andreaalice.com/test/ You'll see it's the first image that doesn't scale. The problem is with .element div. – user2419684 May 26 '13 at 04:09

3 Answers3

2

Have you tried:

.container a img {
    width: 100%;
 }

?

I made a quick example that seems to do what you need here.

Robyflc
  • 1,209
  • 11
  • 16
  • Yes @Robyflc this would be the correct answer in other circumstances, however I had other things in my code that prevented this from working, namely `position:aboslute` set on my container. – user2419684 May 28 '13 at 01:39
  • @user2419684 In the code you posted you have a position:relative set to the container. Did you change it to absolute after posting?? – Robyflc May 28 '13 at 02:05
  • @Robyflc the code I posted was a simplified version of the issue I was having, rather than posting the code for my entire site. So the code I posted actually ended up working fine - and after uploading my entire site andyb discovered the problem was elsewhere in `position: absolute` on my selected elements as seen in the answer below. – user2419684 May 28 '13 at 05:06
0

I managed to recreate the problem in a simple demo. Just shrink the results window to < 520px and the images should resize but the first one does not.

The problem seems to be the following rule

.element * {
    position: absolute;
    margin: 0;
}

Removing the position:absolute; fixes the problem. I think this is because the surrounding <a> on the first image has no width. Adding

.element a {
    width:100%;
}

fixes the problem when page width < 520px but that then breaks page with >= 520px! So I'd just recommend removing position:absolute unless you need that for any other reason. It doesn't seem to affect anything else on the page as far as I can see.

Lastly (and it's only minor) but all the <img> tags should really be self-closing. The page nearly validates.

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
  • You seem to have discovered the issue, however if I remove `position:absolute` I lose all the hover effects on the elements. I think I've found another solution - not sure whether it's the best. I've taken the link off the images and instead created a separate link with a class to fill 100% of the div, and `z-index:1`. It also solves another problem I discovered: previously the text in my elements wasn't clickable because it was sitting in front of the images. Updated code is here: http://andreaalice.com/test/ – user2419684 May 26 '13 at 22:23
  • @Robyflc please don't try to get get attention from commenting on other answers. Please comment on the _question_ in future. – andyb May 27 '13 at 06:28
  • @user2419684 Yes, I missed the _hover_ part. I was only checking for fixing the resizing, sorry It looks like you've solved it another way now anyway, so well done! :-) – andyb May 27 '13 at 06:31
  • @andyb I thought this site was about helping other people and not about 'getting attention'. – Robyflc May 27 '13 at 06:37
  • @Robyflc There are still rules and best practice to follow. Your comment was wrongly placed for whatever reason which I was simply pointing out. – andyb May 27 '13 at 07:18
0

I solved this using flex display. Try and paste this into your inspect element tool

element.style { display: flex; width: 100%; }

Augusto
  • 2,125
  • 18
  • 27