Make a parent div with a relative positioning rule. Like this:
#blabla {
position: relative;
}
Indicate the margin: auto
for each card - #columnL
, #columnM
and #columnR
.
And push the width: 100%
for the img
tag. Like this:
img {
width: 100%;
}
But why do you need absolute positioning?
#blabla {
position: relative;
}
#columnL {
width: 412px;
height: 705px;
position: absolute;
left: 0;
margin: auto;
}
#columnM {
width: 412px;
height: 705px;
right: 0;
left: 0;
position: absolute;
margin: auto;
}
#columnR {
width: 412px;
height: 705px;
position: absolute;
right: 0;
margin: auto;
}
img {
width: 100%;
}
<section id="blabla">
<div id="columnL">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnM">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
<div id="columnR">
<div id="afbeeldingL">
<img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
</div>
<div id="tekstL">
<h1 id="hoofdstuk1">TEXT</h1>
</div>
</div>
</section>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…