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有关。我认为这个漫画网站有这个未来。双页图像显示宽度〜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 {
    max-width: 728px;
    display:block;
    margin:auto;
}

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

Answer 2

您可以尝试以下风格：

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：运行代码段时，应切换到＆＃34;完整页面＆＃34;模式。

Answer 3

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: