Is it possible to resize my image according to the screen size using html/css, or is resizing not the problem at all?

Question

Is it possible to resize my image according to the screen size using html/css, or is resizing not the problem at all?

I've encountered this issue several times, but I'm unable to pinpoint the problem. The page looks fine at a specific size, but when I start testing and scaling down to around 1260px width, the image overflows creating white space. Removing one of the column divs shifted the image so it could scale smaller before the whitespace issue appeared, but then part of the footer started misbehaving as well. I suspect it has something to do with the @media queries, but things got a bit messy along the way and I had to take a break from the project. Can someone help me figure out what's happening?

Thanks.

Here is an image demonstrating the issue.

And here is an image showing correct scaling and alignment.

I included the HTML snippet containing the image without exceeding the character limit. Below that, I provided my entire CSS file for reference.

javascript html css django image

Answer 1

Answer №1

I believe I have a solution for you:

In the code snippet below, you accessed the image using the id selector:

#tree-climber {
    max-width: 100%;
    height: 100%;
    display: block;
}

However, you then defined it as a class here:

<img class="tree-climber" src="{% static 'images/PNW-diagonal-tree-climber.webp' %}" alt="Image of tree climber">
</img>

This discrepancy is causing your styling to not work as expected. Simply use the class selector like this:

.tree-climber {
    max-width: 100%;
    height: 100%;
    display: block;
}

Answer 2

I believe I have a solution for you:

In the code snippet below, you accessed the image using the id selector:

#tree-climber {
    max-width: 100%;
    height: 100%;
    display: block;
}

However, you then defined it as a class here:

<img class="tree-climber" src="{% static 'images/PNW-diagonal-tree-climber.webp' %}" alt="Image of tree climber">
</img>

This discrepancy is causing your styling to not work as expected. Simply use the class selector like this:

.tree-climber {
    max-width: 100%;
    height: 100%;
    display: block;
}

Is it possible to resize my image according to the screen size using html/css, or is resizing not the problem at all?

Answer №1

Similar questions

Jquery code that mimics pressing a key downwards is not functioning properly to execute a keyboard shortcut

When trying to invoke an Angular function from a JavaScript function, it is returning as undefined

Practical applications of flexible layouts in everyday life

Troubleshooting issue: Bootstrap 4 Card trimming absolute content within div

Preventing the build-up of opacity animations in jQuery: Tips and tricks

Transitioning with a CSS cubic-bezier function results in a noticeable jump of the content

The loop seems to be disregarding the use of jQuery's .when() function

Having difficulty defining properties within a JavaScript class

Redirecting with response headers in Next.js

The presence of an undefined variable in `esm.js` is resulting in an overwhelming amount of

Resetting component state in React Native is essential for maintaining the correct

jQuery is unable to locate the FireBreath object

"Problems with the YouTube API functions: playVideo, pauseVideo, and stopVideo not

Angular not displaying retrieved data

SyntaxError: The token + was not anticipated

Creating a full-width layout with CSS div

What is the best way to incorporate six rows of paragraphs using bootstrap?

Executing Datalist's Delete Command through Page Methods Implementation

Is there a way to preserve the original color format without converting it to RGB

Leveraging JQuery animation to manipulate the spinning of HTML jackpot