html - How can I resize all photos to the same size? -
i have site:link
but have following problem:problem
what want is:
1. 2 images must have width of 33.3333%
, middle image must remain is
another of problems when resize browser,the middle image higher.
css
.inline-block{ display: inline-block; vertical-align: top; } .left-img,.right-img{ width: 33.3333%; } .left-img{ background: url("/wp-content/themes/wp_bagel/assets/img/img-01.png"); background-size: cover; } .ctr-img{ background: url("/wp-content/themes/wp_bagel/assets/img/img-02.png"); background-size: cover; } .right-img{ background: url("/wp-content/themes/wp_bagel/assets/img/img-03.png"); background-size: cover; }
html
<div class="left-img inline-block"> <img src="/wp-content/themes/wp_bagel/assets/img/img-01.png" alt="mountain view" style="visibility: hidden;"> </div> <div class="ctr-img inline-block"> <img src="/wp-content/themes/wp_bagel/assets/img/img-02.png" alt="mountain view" style="visibility: hidden;"> </div> <div class="right-img inline-block"> <img src="/wp-content/themes/wp_bagel/assets/img/img-03.png" alt="mountain view" style="visibility: hidden;"> </div>
this not possible html / css. have use javascript. layout, suggest taking @ masonry.
Comments
Post a Comment