Question

所以我需要我的代码让图像保持当前设置的宽高比，无论用户是在较小的屏幕上查看网站，还是调整浏览器的大小而不是全屏查看。 / p>

这是我到目前为止的一些代码，但我只是不确定该怎样做，同时仍保持当前效果的完整性（即图像并排并在中心对齐）。

<style>
.first-image {
    display:inline-block;
    text-align:left;
}
.second-image {
    display:inline-block;
    text-align:right;
}

<body>
<center>
<div class="first-image">
    <a href="index.html"><img src="img/leftbryce.png" onmouseover="this.src='img/whiteleftbryce.png'" onmouseout="this.src='img/leftbryce.png'" width="800 px" height="auto"></a>
</div>

<div class="second-image">
    <img src="img/whiterightbryce.png" onmouseover="this.src='img/rightbryce.png'" onmouseout="this.src='img/whiterightbryce.png'" width="800 px" height="auto">
</div>
</center>

Answer 1

将所有图像包裹在div中，然后将图像宽度设置为百分比而不是像素大小。

Answer 2

点击此链接进行演示： - http://codepen.io/JDabhi/pen/aJNqwa

CSS

img{
  max-width: 100%;
}
center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
}
.first-image {
    display:inline-block;
    text-align:left;
}
.second-image {
    display:inline-block;
    text-align:right;
}

Answer 3

为div提供宽度，图像宽度应始终为100%。

<style type="text/css">
div{max-width:400px;}
img{max-width:100%;}
</style>

<div class="first-image">
    <a href="index.html"><img src="http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg" onmouseover="http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'" onmouseout="this.src='http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'"></a>
</div>

<div class="second-image">
    <img src="http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg" onmouseover="this.src='http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'" onmouseout="this.src='http://www.youramazingplaces.com/wp-content/uploads/2013/04/Venice_Italy-620x387.jpg'">
</div>

调整浏览器大小时保持宽高比

3 个答案: