When I do this code shouldn't all images scale to the same size evenly?

HTML & CSS
1 
 <style type="text/css">
#holder {
    width:653px;
    height:345px;
    border:3px solid red;
    position:relative;
}

.hvcentered {
    width:100%;
    height:auto;
    background-color:#00a0b0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
</style>


  

<div id="holder">
<div class="hvcentered" style="display:table; border-spacing:5px; background-color:#38761d; margin:0 ;">
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/4ZqvjoB.png" width="1024" height="1024" alt="Facebook"></a>
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/SjSUmlT.png" width="400" height="400" alt="Twitter"></a>
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/FRKp9B0.png" width="512" height="512" alt="Pinterest"></a>
</div>



</div>
2

Doing this worked, I made all the images 400px and uploaded them as that, then put them in as width 100%. Now, whenever I scale the holder width, doing this scales the icons to size manually.

 <style type="text/css">
#holder {
    width:656px;
    height:auto;
    border:0px solid red;
    position:relative;
}

.hvcentered {
    width:100%;
    height:auto;
    background-color:#00a0b0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
</style>


  

<div id="holder">
<div class="hvcentered" style="display:table; border-spacing:5px; background-color:#38761d; margin:0 ;">
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/xLNGTz6.png" width="1024" height="1024" alt="Facebook"></a>
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/SjSUmlT.png" width="400" height="400" alt="Twitter"></a>
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/GKf6qp4.png" width="400" height="400" alt="Pinterest"></a>
</div>



</div>
3

The code as you’ve posted it above has images of different sizes.

https://i.imgur.com/xLNGTz6.png" width="1024" height="1024"
https://i.imgur.com/SjSUmlT.png" width="400" height="400"
https://i.imgur.com/GKf6qp4.png" width="400" height="400"

Which displays like this:

(Two of your images are no longer available on imgur, so I substituted other images of the same size.)

As your outer container is a fixed width, there is little point in trying to make the images scalable. Create images of the required size and use those. Starting with an image of 1024px x 1024px when you want it to display at 212px square is very poor practice. Using such a large image uses more bandwidth, forces the browser to do the rescaling and slows the page load time.

1 Like
4

Where did the bears come from, I don’t recall uploading pictures of bears.

5

The other 2 were fb and pinterest, I must’ve deleted them. I just added the image that worked twice.

 <style type="text/css">
#holder {
    width:656px;
    height:auto;
    border:0px solid red;
    position:relative;
}

.hvcentered {
    width:100%;
    height:auto;
    background-color:#00a0b0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
</style>


  

<div id="holder">
<div class="hvcentered" style="display:table; border-spacing:5px; background-color:#38761d; margin:0 ;">
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/SjSUmlT.png" width="1024" height="1024" alt="Facebook"></a>
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/SjSUmlT.png" width="400" height="400" alt="Twitter"></a>
    <a style="display:table-cell;" href="#nogo"><img style="display:block; width:100%; height:auto;" src="https://i.imgur.com/SjSUmlT.png" width="400" height="400" alt="Pinterest"></a>
</div>



</div>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.