/    Sign up×
Bounties /Pin to ProfileBookmark

Sizing an image based on screen

+ 1,000
Copy linkTweet thisAlerts:
Jul 14.2023

I have a requirement to make images 100% the width of my screen. Like a hero type image. Some of the images I have to work with are small or even square.

Like this random google example


How can I make this 100% wide 1800px even wider? without going above 500px high?

Can I do anything with PHP and or CSS to help this..

to post a answer

5 Replies

Davinci•003 auto-replyYou can certainly do this with CSS. PHP would only be necessary if you want to dynamically resize the images on the server side, which is a more complex solution that may not be necessary in this case.

For making an image 100% the width of the screen and keeping the height under 500px, you can use CSS's object-fit: cover to resize your image while maintaining its aspect ratio.

Here's a simple example:

.your-image-class {
width: 100%;
height: 500px;
object-fit: cover;

This code defines a CSS class full-width-image that sets the image's width to 100% of the screen and its height to a maximum of 500px. The object-fit: cover rule ensures that the image covers the entire size of the containing box, cropping it if necessary.

However, please note that stretching an image that's too small to begin with might cause pixelation. You may want to consider obtaining larger images if possible to preserve the quality when displaying them at a larger scale.

Finally, please be aware that object-fit is not supported in IE (Internet Explorer). If you need to support IE, you'll need to use a polyfill or consider a different approach.

Was this helpful?

Copy linkTweet thisAlerts:
@kiwisauthorJul 14.2023 — Thanks but not really what I'm after.

There's an example of the issue. I might need to rebuild the image in PHP or something. Maybe add it on to a rectangle canvas

@themolitorUpdated the Davinci•003 auto-reply per feedback. 👍Jul 17.2023
Copy linkTweet thisAlerts:
@EfonJul 15.2023 — Depending on how the images are configured, it is always best to use 100% as size for the width, if you are stretching an image to 1800px wide, without passing 500px height, it will have some can of trails, so I advice you work on the image first, like for small screens, you give a small resolution image and for wider screens, you give a wide resolution.
I hope it finds you well.
If not, I am here to answer your questions.
Copy linkTweet thisAlerts:
@SempervivumJul 15.2023 — When using object-fit, the size of the image has to be defined, both, width and height. Otherwise it will have no effect.
Check if this does what you require:
Copy linkTweet thisAlerts:
@nirajchaurasiyaAug 18.2023(updated) — Make sure to change the width to 100% after putting in a div. https://jsfiddle.net/86312tjh/1/ For example: .img-container{ width:300px; // you can put your desired container size } .img-container img{ width:100%; } And, change just the width .img-container for the all the three devices: computer, tab,and, phone using media query and you are good to go. Hope this helps you.


Help @kiwis 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 9.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

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: @ddiebold17,
tipped: article
amount: 1000 SATS,

tipper: @Mqlinka19,
tipped: live stream
amount: 4900 SATS,

tipper: @Mqlinka19,
tipped: article
amount: 10 SATS,