plaatje als child de parent opvullen met dezelfde ratio

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Daniel van Seggelen

Daniel van Seggelen

09/04/2023 10:43:25
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<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
 
PHP hulp

PHP hulp

18/07/2024 10:33:46
 
Adoptive Solution

Adoptive Solution

09/04/2023 17:15:06
Quote Anchor link
Maak de verhouding van div en afbeelding gelijk.

Of gebruik dit om de afbeelding vullend te maken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
span img {
    width: 100%;
    height: 100%;
}
 
Daniel van Seggelen

Daniel van Seggelen

12/04/2023 10:59:03
Quote Anchor link
dat is lekker makkelijk. Natuurlijk werkt dit niet. De ratio word niet intact gehouden .
 
Jan Koehoorn

Jan Koehoorn

13/04/2023 14:17:29
Quote Anchor link
Kan op heel veel manieren. Eén voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
Ad Fundum

Ad Fundum

14/04/2023 15:03:52
Quote Anchor link
Waarom niet gewoon
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
background-size: cover;
?
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Gewijzigd op 14/04/2023 15:04:13 door Ad Fundum
 
Ozzie PHP

Ozzie PHP

14/04/2023 15:09:55
Quote Anchor link
@Jan en @Ad ... het betreft geen background-image.
 
Ad Fundum

Ad Fundum

14/04/2023 15:24:52
Quote Anchor link
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

Ozzie PHP

14/04/2023 16:08:39
Quote Anchor link
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

Jan Koehoorn

14/04/2023 17:23:02
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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.
 
Ozzie PHP

Ozzie PHP

14/04/2023 18:03:10
Quote Anchor link
>> Een achtergrondafbeelding kan prima

Als het ook inderdaad een achtergrondafbeelding betreft.
 
Jan Koehoorn

Jan Koehoorn

14/04/2023 20:40:04
Quote Anchor link
@Ozzie: ben benieuwd: wat zou jouw oplossing voor een content img zijn? Ik weet hoe ik het zou doen :-)
 
Ozzie PHP

Ozzie PHP

14/04/2023 22:00:10
Quote Anchor link
@Jan: Ik heb er eerlijk gezegd niet over nagedacht. Ik ken de situatie niet en ik weet niet wat de TS wil bereiken. Gaat het om (wisselende) content afbeeldingen? Een productoverzicht, een gallery? Of gaat het inderdaad om een illustratieve achtergrondafbeelding? Pas als je dat weet kun je bepalen wat een passende oplossing is. Een auto is een auto, maar een auto om boodschappen mee te doen in de binnenstad van Amsterdam, is een andere auto dan die waarmee je door de woestijn gaat scheuren of waarmee je gaat meedoen met de Formule 1. Pas als je de precieze bedoeling ergens van kent, kun je een zinvol passend antwoord geven.
 
Daniel van Seggelen

Daniel van Seggelen

14/04/2023 22:39:08
Quote Anchor link
Veel reacties.

Nou een background is idd wel een oplossing in mijn geval.
Had daar dus niet goed over nagedacht, bedankt
 
Jan Koehoorn

Jan Koehoorn

15/04/2023 08:54:24
Quote Anchor link
Er zijn ook content-afbeelding oplossingen (bijv met srcset) maar in mijn dagelijkse werk kies ik ik meestal toch liever deze richting, ook omdat het veel makkelijker is ivm responsive design. @Ozzie: eens dat het semantisch niet helemaal perfect is, maar als ik dit zie (voorbeeld van mdn web docs):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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" />

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 ;-)
 
Ozzie PHP

Ozzie PHP

15/04/2023 16:54:46
Quote Anchor link
@Jan

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.