How to get the height of an <img>, divide by 2 and check if its greater than 200 pixel?

pstein · August 22

I want to perform the following operations for each element on a webpage:

1.) Get the height of it
2.) get 50% of the value
3.) check if the new height is still above 200 pixel
4.) set the new height (if necessary)

Something like

document().get(“img”).setHeight(max(currimg.getHeight() * 0.5,200));

The command above does nor exist. It should only demonstrate a near-to solution.

How would a real command look like?

Ingolme · August 23

If you're comfortable with writing more than one line of code, the solution is really simple.

let img = document.querySelector("img"); // Get a reference to the image
let newHeight = img.offsetHeight * 0.5; // Get half of the image's height
if(newHeight < 200) newHeight = 200; // If the value is less than 200 then use 200 instead
img.style.height = newHeight + "px" // Assign a new height to the image

Monie · September 17

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Height Adjustment</title>
    <style>
        /* Basic styling for the images */
        img {
            display: block;
            margin: 10px auto;
            max-width: 100%;
            height: auto;
        }
        .container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Adjust Image Heights</h1>
        <img src="1.jpg" alt="Sample Image 1">
        <img src="2.png" alt="Sample Image 2">
        <img src="3.png" alt="Sample Image 3">
    </div>
<script>
// Function to adjust the height of each img element on the page
function adjustImageHeights() {
    // Select all img elements
    const images = document.querySelectorAll('img');

    images.forEach(image => {
        // Get the computed height of the img element in pixels
        let height = window.getComputedStyle(image).height;
        height = parseFloat(height); // Convert to a number

        // Calculate 50% of the height
        let newHeight = height * 0.5;

        // Cap the new height at a maximum of 200px, and ensure it's at least 200px
        if (newHeight > 200) {
            newHeight = 200;
        } else if (newHeight < 200) {
            newHeight = 200;
        }

        // Set the new height
        image.style.height = newHeight + 'px';
    });
}

// Run the function to adjust img element heights after page load
window.onload = adjustImageHeights;
</script>
</body>
</html>

This is a complete html sample that will check for all <img> elements on you page and return the image height to 200px.
If the 50% height of the original image is greater than 200px, then 200 px will be set as the new height if the image.

dsonesuk · September 18

The op only wants to adjust height to 200 IF it falls below 200 after being divided by 2, while the other img tag elements will use divided by 2 value.

Your method could easily be done by adding style height: 200px;

You only need this

if (newHeight < 200) {
            newHeight = 200;
        }

Sign In

How to get the height of an <img>, divide by 2 and check if its greater than 200 pixel?

Recommended Posts

pstein

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Monie

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity