plaatje als child de parent opvullen met dezelfde ratio
Code (php)
1
2
3
2
3
<div id="parent">
<span><img src=""bla.jpg"/> <span>
</div>
<span><img src=""bla.jpg"/> <span>
</div>
De parent id is bij 150X250
De span child is 500X900
Wat ik wil dat er geen witruimte is in de parent met een overlow:hidden in css, waarbij de child img het plaatje vergroot, zodat alles in de parent bedekt word.
De ratio moet verder niet gewijzigd worden.
Wat is de beste manier om dit te bereiken?
MVG
Daniel
Of gebruik dit om de afbeelding vullend te maken.
Code (php)
1
2
3
4
2
3
4
span img {
width: 100%;
height: 100%;
}
width: 100%;
height: 100%;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>PHPHulp</title>
<style>
.parent {
width: 500px;
height: 900px;
background: url('phphulp.jpg') center center / contain no-repeat;
position: relative;
}
.parent::before {
content: '';
position: absolute;
width: 150px;
height: 200px;
background: url('phphulp.jpg') center center / contain no-repeat;
}
</style>
</head>
<body>
<div class="parent"></div>
</body>
</html>
<html>
<head>
<title>PHPHulp</title>
<style>
.parent {
width: 500px;
height: 900px;
background: url('phphulp.jpg') center center / contain no-repeat;
position: relative;
}
.parent::before {
content: '';
position: absolute;
width: 150px;
height: 200px;
background: url('phphulp.jpg') center center / contain no-repeat;
}
</style>
</head>
<body>
<div class="parent"></div>
</body>
</html>
Code (php)
1
background-size: cover;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Maar stel dat de HTML te veranderen valt (bijvoorbeeld omdat er fouten in zitten), dan doet de CSS waarde 'cover' wel precies waarom gevraagd wordt.
Ad Fundum op 14/04/2023 15:03:52:
Waarom niet gewoon ?
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Code (php)
1
background-size: cover;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Omdat "cover" ervoor zorgt dat de hele container div opgevuld wordt, waardoor de afbeelding afgesneden zou kunnen worden. Met "contain" zorg je ervoor dat de hele afbeelding in beeld komt.
Als het ook inderdaad een achtergrondafbeelding betreft.
Nou een background is idd wel een oplossing in mijn geval.
Had daar dus niet goed over nagedacht, bedankt
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
dan zie je dat de breakpoints dus hard in je HTML staan, en ik heb ze toch liever als een variabele/mixin in mijn SCSS files, voor flexibiliteit.
Anyway, de OP heeft nu een oplossing en daar ging het ons allemaal om ;-)
Ik zeg niet dat een background-image per definitie fout is. Wat ik probeer te zeggen is dat een background-image niet in alle gevallen passend is. Denk bijv. aan een overzichtspagina met daarop 25 producten. Lijkt me raar als je dan al die productafbeeldingen via inline-style als background-image gaat plaatsen. Een background-image is wat het is, een achtergrondafbeelding, meestal deel uitmakend van een vaste lay-out. Als het gaat om (variabele) content/inhoud dan lijkt het me niet passend.
Maar goed, zolang Daniël niet meer informatie geeft, valt er weinig over te zeggen.
Hetzelfde probleem kun je op meerdere manieren oplossen. Wil je dat een auto minder hard rijdt? Plaats drempel, stoplichten of leg spijkermatten neer. Welke oplossing de juiste is hangt af van de situatie ;-)
In dit geval was er initieel geen sprake van een background-image. Er is nu (mogelijk) een oplossing aangedragen die eigenlijk niet helemaal past bij het initiële probleem.