根据长宽比调整图像宽度

Question

我正在建设一款漫画阅读网站，遇到了显示图片的问题。我的大多数图片都具有2/3的宽高比，即1000x1500像素。因此，我使用以下CSS规则来显示它们。但是，有些图片是双页图片。因此，当应用CSS规则max-width=728px时，这个4/3的宽高比图片不能正常显示。因此，基本上我想要当用户遇到4/3宽高比的图片时更改max-width=728px的CSS规则。CSS规则max-width=728px仍然必须应用于2/3宽高比的图片，但当宽高比变为4/3时，它必须是max-width=1250px。我需要做什么才能解决这个问题？它与CSS有关还是需要一些JavaScript？我认为这个漫画网站会有这个功能。双页图片的显示宽度约为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;
}

- Nasuh

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>

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

- ConnorsFan

Answer 2

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

.gnc02 img {
    max-width: 100%;
    float:left;
}

- Miomir Dancevic

---

谢谢。谁会想到它可以这么简单。 - Nasuh

我已经应用了它，但它没有起作用。你能看一下我的网站吗？http://mangabozok.com:8080/oku/Berserk/346/5 - Nasuh

Answer 3

尝试这个。

.gnc02 {
    width: 99% !important;
    display:block;
    margin:auto;
    }
    .gnc02 img {
        max-width: 100%;
      }

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

这段代码用于响应式设计。我认为它可以帮助你处理任何类型的图像或图像大小。

- aditya shrivastava