resize images

revision:

resizing images with HTML and CSS

resize with HTML

evening

resize with CSS

evening evening 
            <div class="grid_A">
                <div>
                    <h3>resize with HTML</h3>
                    <img src="../images/1.jpg" width="400" height="300" alt="evening" style="margin-left:5vw;">
                </div>
                <div>
                    <h3>resize with CSS</h3>
                    <img class="resize" src="../images/1.jpg" alt="evening" style="margin-left:1vw;">
                    <img class="resize_a" src="../images/1.jpg" alt="evening" style="margin-left:1vw;">
                </div>
            </div>
            <style>
                img.resize{width: 30vw; height: 20vw;}
                img.resize_a{max-width: 30%; max-height: 30%;}
            </style>

image fit window size

top

vw vs padding

evening
beach
bath
code: 
                <div >
                    <div class="box">
                        <div class="img-container"><img src="../images/1.jpg" alt="evening"></div>
                    </div>
                    <div class="box">
                        <div class="img-container"><img src="../images/2.jpg" alt="beach"></div>
                    </div>
                    <div class="box-vw">
                        <div class="img-container"><img src="../images/3.jpg" alt="bath"></div>
                    </div>
                </div>
                <style>
                    .box, .box-vw {background-color: green;border-radius: 1vw; overflow: hidden;margin-bottom: 1.5vw;}
                    .box:nth-of-type(2) {width: 26vw; }
                    .box-vw .img-container {width: 100vw; height: 66.620879vw; padding-bottom: inherit;}
                    .img-container {width: 100%; height: 0;/* Aspect ratio of picture*/padding-bottom: 66.620879%;}
                    img {width: 100%;}
                </style>