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

Question

I am building a comic reading website. I got a problem with displaying images. Most of my images are having the aspect ratio of 2/3. Means 1000x1500. So I am displaying them with below css rules. But there are some images like double page images. So when the css rule max-width=728px is applied this 4/3 raito image can't read anything. So basically I want to change the css rule for max-width=728px when the user came across to 4/3 ratio images. Css rule max_width=728px still have to apply the 2/3 ratio images but when the ratio changes to 4/3 it has to be max-width=1250px . What do i need to do for solving this? It is related to css or need some javascript. This manga website has this future I think. Double page images are displaying width of ~1300 and when i shrink the browser its javascript updating the width and height.

Example: http://www.mangaeden.com/en/en-manga/berserk/344/17/ My website: 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

You can try the following style:

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

For the 2:3 images, the max-height applies and restricts the width to 728 pixels. For the 4:3 images, the max-width applies and restricts the width to 1250 pixels.

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

Note: when running the code snippet, you should switch to "Full page" mode.

Answer 3

try this

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

this code is used for responsive designing. I think this may help you in any type of image or the size of the image.