Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

Question

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page.

Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the third, fourth, and so on...

As a newcomer to JavaScript, I acknowledge that there may be a simple mistake in my approach.

You can view the current status here: https://codepen.io/GBol/pen/GRXWvJY

<div class="boxA">   
  <img class="landscape"src="http://placekitten.com/800/400">
</div>

<div class="boxB">   
  <img class="portrait"src="http://placekitten.com/400/800">
</div>

<div class="boxC">   
  <img class="portrait"src="http://placekitten.com/400/800">
</div>






.boxA {
  width: 20%;
  border: solid blue;
  display: block;
  float: left;
 }

.boxB {
 border: solid blue;
 display: block;
 float: left;
 }

.landscape {
width: 100%;
display: block;
} 

.portrait {
height: 100%;
/** to center horizontally **/
margin: auto;
display: block;
}






var boxA = document.querySelector(".boxA"),
boxB = document.querySelector(".boxB")

function copyHeight(from,to){
to.style.height = from.getBoundingClientRect().height + "px"
}
copyHeight(boxA,boxB)

function copyWidth(from,to){
to.style.width = from.getBoundingClientRect().width + "px"
}
copyWidth(boxA,boxB)

javascript html css image

Answer 1

Answer №1

When using the querySelector method, it will only return the first matching element. If there are multiple elements that match the selector, only the first one will be selected.

To apply a function to all elements on the page with the class of boxB, you should use the querySelectorAll method to select them all.

You will then need to iterate over each selected element and run the function for each one. One way to do this is by using the forEach() method.

The forEach method takes a function as an argument, which will be executed for every element in the array or nodelist. This function will receive each element as a parameter, allowing you to reference it within the function. Here is an example of such a function:

(box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
}

Instead of writing the function in the traditional way, you can opt for the "fat arrow" syntax for better readability:

(box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
}

Putting it all together, your final code may look like this:

const boxA = document.querySelector(".boxA")
const boxB = document.querySelectorAll(".boxB")

boxB.forEach((box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
})
    
function copyHeight(from, to){
  to.style.height = from.getBoundingClientRect().height + "px"
}

function copyWidth(from, to){
  to.style.width = from.getBoundingClientRect().width + "px"
}

Answer 2

When using the querySelector method, it will only return the first matching element. If there are multiple elements that match the selector, only the first one will be selected.

To apply a function to all elements on the page with the class of boxB, you should use the querySelectorAll method to select them all.

You will then need to iterate over each selected element and run the function for each one. One way to do this is by using the forEach() method.

The forEach method takes a function as an argument, which will be executed for every element in the array or nodelist. This function will receive each element as a parameter, allowing you to reference it within the function. Here is an example of such a function:

(box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
}

Instead of writing the function in the traditional way, you can opt for the "fat arrow" syntax for better readability:

(box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
}

Putting it all together, your final code may look like this:

const boxA = document.querySelector(".boxA")
const boxB = document.querySelectorAll(".boxB")

boxB.forEach((box) => {
  copyHeight(boxA, box)
  copyWidth(boxA, box)
})
    
function copyHeight(from, to){
  to.style.height = from.getBoundingClientRect().height + "px"
}

function copyWidth(from, to){
  to.style.width = from.getBoundingClientRect().width + "px"
}

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

Answer №1

Similar questions

Achieving success was like uncovering a hidden treasure chest after a successful

Developing a calendar with limited availability for selecting future dates and restricting the ability to choose past dates

Tips for extracting HTML entities from a string without altering the HTML tags

Only certain fields are returned by JQuery's form serialize() method

Integrate a post AJAX call into an Angular service for seamless functionality

Submitting data with AJAX to a NodeJS server

if jade is being inconsistent

Tips for accessing the 'index' variable in *ngFor directive and making modifications (restriction on deleting only one item at a time from a list)

Transferring User ID from Google Tag Manager to GA4 Problem

Validation for a datepicker embedded within a table

When imported, Node / JS instantly generates a new instance

What is the best way to organize products based on the proximity of users using MongoDB's Geospatial Queries

Exclusively Bootstrap-Timepicker

Extracting precise information from HTML documents

The button text in Bootstrap 5 is black instead of white as shown in their demo

I encountered a NextJS error while trying to implement getStaticProps(). Can someone help identify the issue at hand?

Best practices for integrating JavaScript with PHP and MySQL

Utilize identical selectbox across various tabs

My Node JS program becomes unresponsive when reaching the resolve() method

Linking asynchronous AJAX requests using Angularjs