javascript - 根据宽高比更改图像的宽度

Question

我正在建立一个漫画阅读网站。我在显示图像时遇到问题。我的大部分图片的纵横比都是 2/3。表示 1000x1500。所以我用下面的 css 规则显示它们。但也有一些图像，如双页图像。因此，当应用 css 规则 max-width=728px 时，此 4/3 raito 图像无法读取任何内容。所以基本上我想在用户遇到 4/3 比例图像时更改 max-width=728px 的 css 规则。 Css 规则 max_width=728px 仍然必须应用 2/3 比例的图像，但当比例更改为 4/3 时，它必须是 max-width=1250px。我需要做什么来解决这个问题？它与 css 相关或需要一些 javascript。我认为这个漫画网站有这样的 future 。双页图像显示的宽度约为 1300，当我缩小浏览器时，它的 javascript 会更新宽度和高度。

示例:http://www.mangaeden.com/en/en-manga/berserk/344/17/ 我的网站:http://mangabozok.com/oku/Berserk/346/5

HTML:

<div class="gnc02">
<img src="paths">
</div>

CSS:

.gnc02 img {
     display:block;
     margin:auto;
     max-width: 728px;
     height: auto;
}

Answer 1

你可以试试下面的样式:

.gnc02 img
{
    display: block;
    margin: auto;
    max-width: 1250px;
    max-height: 1092px;
}

对于 2:3 图像，max-height 应用并将宽度限制为 728 像素。对于 4:3 图像，max-width 应用并将宽度限制为 1250 像素。

.gnc02 img
{
    display: block;
    margin: auto;
    max-width: 1250px;
    max-height: 1092px;
}

<div class="gnc02">
  <img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
<br/>
<div class="gnc02">
  <img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" />
</div>

注意:运行代码片段时，您应该切换到“整页”模式。