plaatje als child de parent opvullen met dezelfde ratio

Door Daniel van Seggelen op 09-04-2023 10:43

2.029 views

<div id="parent">
<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

A Adoptive Solution

09-04-2023 17:15

Maak de verhouding van div en afbeelding gelijk.

Of gebruik dit om de afbeelding vullend te maken.

 span img {
	width: 100%;
	height: 100%;
}

D Daniel van Seggelen

12-04-2023 10:59

dat is lekker makkelijk. Natuurlijk werkt dit niet. De ratio word niet intact gehouden .

Jan Koehoorn

13-04-2023 14:17

Kan op heel veel manieren. Eén voorbeeld:


<!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>

? Onbekende gebruiker

14-04-2023 15:03 gewijzigd op 14-04-2023 15:04

Waarom niet gewoon

background-size: cover;

?
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Ozzie PHP

14-04-2023 15:09

@Jan en @Ad ... het betreft geen background-image.

? Onbekende gebruiker

14-04-2023 15:24

Niet in het voorbeeld dat gegeven wordt nee.
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.

Ozzie PHP

14-04-2023 16:08

Klopt, maar dat valt niet af te leiden uit de initiële situatie. Als het content betreft, bijv. een illustratieve foto of een productfoto op een overzichtspagina, dan is de optie voor een background-image niet voor de hand liggend. Maar wellicht kan Daniël vertellen wat hij precies van plan is?

Jan Koehoorn

14-04-2023 17:23

Een achtergrondafbeelding kan prima, omdat de aspect-ratio dan vrij makkelijk te behouden is. In CSS hebben we tegenwoordig ook de property aspect-ratio, maar drie maal raden welke browser dat nog niet ondersteunt ;-)

Ad Fundum op 14/04/2023 15:03:52

Waarom niet gewoon
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.

Ozzie PHP

14-04-2023 18:03

>> Een achtergrondafbeelding kan prima

Als het ook inderdaad een achtergrondafbeelding betreft.

Jan Koehoorn

14-04-2023 20:40

@Ozzie: ben benieuwd: wat zou jouw oplossing voor een content img zijn? Ik weet hoe ik het zou doen :-)

Reageren

Inloggen om te reageren