如何使图像与Web浏览器窗口的大小成比例缩放？

Question

My problem is as followed. When I resize my browser window the middle image drops below 2 others which are beside it.

1. Image of it while working: Working website image
2. Image of it when browser is made smaller: Broken Website Image
3. The same happens with smaller monitors and my code is bellow:

HTML: HTML Code

CSS:

.content {
padding-top:50px;
text-align: center;
}
.samp{
float: left;
width: 188px;
height: 356px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
float: left;
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
float: right;
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}

There are 3 images I just want them to stay in one place which is in the middle area and resize with the browser.

Answer 1

change your code with this, bro...

 .content {
    padding-top:50px;
    text-align: center;
    white-space: nowrap;
}

.samp, .minecraft, .multiv{
    vertical-align: top;
    display: inline-block;
}

.samp{
width: 247px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}

it'll give you a solid wrapper with no shifting, and you could tweak it from there :F

Answer 2

Dont use float , simply use width:33.3% , and height:auto

Example:

http://fiddle.jshell.net/Ft3p4/

Answer 3

You can do something along the lines of relative and absolute positioning and blocks with percentage based widths.

Result: http://jsfiddle.net/3mAh3/2/

I gave it all a wrapper ( .collection class) and styled all div s using that class, can resize it to pretty much anything and it will also overlap nicely thanks to z-index

HTML

<div class="content">
<div class="collection">
  <div class="samp">
    <a href="index.html"><img src="http://therealmgaming.com/images/samp.png" /></a>
  </div>
  <div class="multiv">
    <a href="index.html"><img src="http://therealmgaming.com/images/multiv.png" /></a>
  </div>
  <div class="minecraft">
    <a href="index.html"><img src="http://therealmgaming.com/images/minecraft.png" /></a>
  </div>
</div>
</div>

CSS:

 .content {
    padding-top: 50px;
    text-align: center;
 }
 .collection {
    position: relative;
    width: 100%;
 }
 .collection div {
    position: absolute;
    width: 33%;
 }
 .multiv {
    top: 50px;
    left: 33%;
    z-index: 2;
 }
 .samp {
    left: 0;
    z-index: 1;
 }
 .minecraft {
    top: 30px;
    right: 0;
    z-index: 1;
 }

You can safely remove .collection and add the styles to .content depending on the other content in .content , but then don't forget to change .collection div to .content div as well.

Example: http://jsfiddle.net/3mAh3/4/

Or better: http://jsfiddle.net/3mAh3/5/