Nasuh Nasuh - 1 month ago 6
CSS Question

Change the width of the images according to aspect ratio

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

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