Resize Image with CSS

When you want to make several images listed side-by-side horizontally and re-size those images according to devices accessing.

We develope PHP, html and CSS to customize wordpress based home page.

For CSS, “

.d1 {
display:flex;
width:100%;
}

.d1 img {
width: 33%;
align-self: flex-start;
display:flex;
text-align:center;
}

“d1” is class name at html.

At html, “

<p class=”d1″>
<img src=”image1.jpg”>
<img src=” image2.jpg ” >
<img src=” image3.jpg “>
</p>

“align-self: flex-start;” in CSS will set these images nicely listed at safari browser of iphone. Otherewise, ratio of images was not controlled right.