/    Sign up×
Community /Pin to ProfileBookmark

changing img size when changing display size

Can someone tell me how can I make that duck , or what ever it is, to resize herself deepening the screen size ?
https://codepen.io/raul-rogojan/pen/wLGGwp?editors=1100

to post a comment
CSS

13 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJun 16.2019 — With ".img img" you were on the right track already. Reduce the size and everything should be fine:

.img img {
width: 40%;
}

https://codepen.io/Sempervivum/pen/QXNEaj?editors=1100
Copy linkTweet thisAlerts:
@codyhillauthorJun 16.2019 — @Sempervivum#1604821 I will want it to be bigger on larger screen size , I don't know why is not staying in it's own div.
Copy linkTweet thisAlerts:
@SempervivumJun 16.2019 — In my codepen it's growing the bigger the wider the viewport is. In a proportional way, i. e. it's width is always the same percentage of the container. Unsure what your intention is.
Copy linkTweet thisAlerts:
@codyhillauthorJun 16.2019 — @Sempervivum#1604823 I want that img to be 90% of the div it belongs. But If I add .img ing : width 100% is much bigger then the size of the div and bleeds over.
Copy linkTweet thisAlerts:
@SempervivumJun 16.2019 — I see. Going to look into ...
Copy linkTweet thisAlerts:
@SempervivumJun 16.2019 — ... there is a CSS property "object-fit" that enables for expanding an image to the boundaries of it's parent while keeping it's aspect ratio (similar to background-size):

https://css-tricks.com/almanac/properties/o/object-fit/

https://stackoverflow.com/questions/34247337/object-fit-not-affecting-images

I tried to apply this to your demo, check it this is what you require:

https://codepen.io/Sempervivum/pen/QXNEaj?editors=1100
Copy linkTweet thisAlerts:
@codyhillauthorJun 16.2019 — @Sempervivum#1604833 Perfect ! Thanks !
Copy linkTweet thisAlerts:
@KeverJun 16.2019 — You could also lose the image tag and go for a double background. This might be easier to work with, since object-fit doesn't work on a positioned image.
.header-illustration {
background-image: url('images/webmoney_PNG14.png'), url('images/pexels-photo-2439625.jpeg');
width: 100%;
height: 60vh;
background-position: 40% 50%, center;
background-size: auto 40%, cover;
background-repeat: no-repeat;
}
Copy linkTweet thisAlerts:
@codyhillauthorJun 17.2019 — @Kever#1604838 That's interesting, I did not knew that you can do double bg. But in the main file I want the png img to be positions bottom: 0 and right: 0;
Copy linkTweet thisAlerts:
@KeverJun 17.2019 — You can do multiple background. You put them from top image to bottom image, seperated by a comma.

To position the png image bottom right you would write: background-position: bottom 0 right 0, center;
Copy linkTweet thisAlerts:
@codyhillauthorJun 17.2019 — @Kever#1604888 yeah , but then will position all the background to bottom right 0 . Not that would be a problem in general but I have to use 2 png img and an jpeg.
Copy linkTweet thisAlerts:
@KeverJun 17.2019 — You can use the comma separated pattern for each statement.

background-image: [color=red]url('A')[/color], [color=blue]url('B')[/color], [color=green]url('C')[/color];

background-position: [color=red]40% 50%[/color], [color=blue]center[/color], [color=green]center[/color];

background-size: [color=red]auto 40%[/color], [color=blue]auto[/color], [color=green]cover[/color];

background-repeat: [color=red]no-repeat[/color], [color=blue]repeat-x[/color], [color=green]repeat[/color];
Copy linkTweet thisAlerts:
@codyhillauthorJun 17.2019 — @Kever#1604903 oh ! ok thank !
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Marika,
tipped: article
amount: 1000 SATS,

tipper: @hatem774,
tipped: article
amount: 1 SATS,

tipper: @nearjob,
tipped: article
amount: 1000 SATS,
)...