How to effectively manipulate images in html and css?


#1

HTML code is div img img img /div
I know I can do this making the positions relative, but it won’t work well on multiple devices so please can you give me few leads or links on where I can find an alternative ?


#2

It could be done with flex in a wrapping column arrangement. It could also be done with display: table.


#3

I will look into them thanks. I managed to move the blue one up using padding. Now I only need to move the red one below


#4

Getting that initial layout can be done with flex.
The question is what do you want it to do on smaller screens when the images no longer fit side by side.


#5

Thank you Sam !!


#6

Hi there Victor_V1,

here is a responsive example, using the float attribute

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#container {
    max-width: 60em;
    margin: auto;
    border: 1px solid #999;
    background-color: #fff;
    box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4 );
    overflow: hidden;
 }

#container img { 
    float: left;
    height: auto; 
 }

#container img:nth-of-type(1),
#container img:nth-of-type(3) {
    width: 33.333%; 
 }

#container img:nth-of-type(2) {
    width: 66.666%; 
 }

</style>

</head>
<body>

<div id="container">
 <img src="https://via.placeholder.com/600x300/0f0/fff" width="600" height="300" alt="">
 <img src="https://via.placeholder.com/1200x150/00f/fff" width="1200" height="150"  alt="">
 <img src="https://via.placeholder.com/600x150/f00/fff" width="600" height="150"  alt="">
</div>

</body>
</html>

coothead


#7

Thank you coothead !