Dynamically setting CSS values with jQuery to center an image within a div

Question

Dynamically setting CSS values with jQuery to center an image within a div

I'm trying to center an image in a div according to the width of the image after I scale it to have a height of 250px.

For example, if I had an image with dimensions 625x450 and, in my CSS file, set the height of the image to be 250px, then the width would automatically scale to 347.22px. I want to be able to detect that scaled width and then set a margin-left of (width - height)/2 to center the image.

The CSS for this example in hard-coded form would look like this (the entire fiddle is here):

.gallery {
    width: 250px;
    overflow: hidden;
    position: relative;
}

.gallery img {
    height: 250px;
    width: auto;
    margin-left: -48px;
}

But I want to be able to do this on the fly with images of other dimensions. I have attempted to do this by cutting out the margin-left line of the hard-coded CSS and adding some jQuery (the entire fiddle is here):

$(document).ready(function(){
    oldWidth = $('.gallery img').width();
    newMarg = (oldWidth - 250)/2);       
    $('.gallery img').css("margin-left", newMarg);
}

I have not had any success with that approach, though. It has to be something with the jQuery that I'm messing up. I'm very new to everything I'm attempting to do here, and I feel like I might be missing something simple.

jquery html css

Answer 1

Answer №1

After reading through this informative thread

I applied the suggested changes from that discussion to your jsFiddle:

Modified jsFiddle

<div class="outer">
   <div class="inner">
       <img src="" />
   </div>
</div>

and

.outer {
  width: 250px; overflow: hidden;
}
.inner {
  float: left; position: relative; left: 50%;
}
.inner img {
  height: 250px; display: block; position: relative; left: -50%;
}

The great part about this solution is that it does not rely on Javascript

Answer 2

After reading through this informative thread

I applied the suggested changes from that discussion to your jsFiddle:

Modified jsFiddle

<div class="outer">
   <div class="inner">
       <img src="" />
   </div>
</div>

and

.outer {
  width: 250px; overflow: hidden;
}
.inner {
  float: left; position: relative; left: 50%;
}
.inner img {
  height: 250px; display: block; position: relative; left: -50%;
}

The great part about this solution is that it does not rely on Javascript

Answer 3

Answer №2

To center the image on the page, set display:block and apply margin: 0 auto;text-align:center;

Answer 4

To center the image on the page, set display:block and apply margin: 0 auto;text-align:center;

Answer 5

Answer №3

Aside from some errors in parentheses placement, the subtraction was actually done in reverse order:

$(document).ready(function() {
    oldWidth = $('.gallery img').width();
    newMarg = (250 - oldWidth) / 2;
    $('.gallery img').css("margin-left", newMarg);
});

http://jsfiddle.net/99PMd/10/

Please take into consideration that if there are multiple .gallery or img elements within it, the variable oldWidth will only capture the width of the first image found in the DOM. If you have multiple images or galleries, you should consider refactoring your code with a loop:

$(document).ready(function() {
    $('.gallery img').each(function() {
        oldWidth = $(this).width();
        newMarg = (250 - oldWidth) / 2;
        $(this).css("margin-left", newMarg);
    });
});

http://jsfiddle.net/99PMd/11/

Personally, I believe overflowing an image like that is not visually appealing, so resizing the image to fit its container would be a better option. This can be achieved using pure CSS:

.gallery img {
    height: auto;
    max-width:100%;
}

http://jsfiddle.net/99PMd/12/

Answer 6

Aside from some errors in parentheses placement, the subtraction was actually done in reverse order:

$(document).ready(function() {
    oldWidth = $('.gallery img').width();
    newMarg = (250 - oldWidth) / 2;
    $('.gallery img').css("margin-left", newMarg);
});

http://jsfiddle.net/99PMd/10/

Please take into consideration that if there are multiple .gallery or img elements within it, the variable oldWidth will only capture the width of the first image found in the DOM. If you have multiple images or galleries, you should consider refactoring your code with a loop:

$(document).ready(function() {
    $('.gallery img').each(function() {
        oldWidth = $(this).width();
        newMarg = (250 - oldWidth) / 2;
        $(this).css("margin-left", newMarg);
    });
});

http://jsfiddle.net/99PMd/11/

Personally, I believe overflowing an image like that is not visually appealing, so resizing the image to fit its container would be a better option. This can be achieved using pure CSS:

.gallery img {
    height: auto;
    max-width:100%;
}

http://jsfiddle.net/99PMd/12/

Answer 7

Answer №4

CodePen

$(document).ready(function(){

   var containerWidth = 300;
   var imageWidth = $('.image-container img').width();

   if(imageWidth > containerWidth){
       $('.image-container img').css({marginLeft: (containerWidth - imageWidth)/2 });
   }

});

Answer 8

CodePen

$(document).ready(function(){

   var containerWidth = 300;
   var imageWidth = $('.image-container img').width();

   if(imageWidth > containerWidth){
       $('.image-container img').css({marginLeft: (containerWidth - imageWidth)/2 });
   }

});

Dynamically setting CSS values with jQuery to center an image within a div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

How to utilize a specific option as a variable within a PHP select dropdown menu

Angular 5: Using JQuery Datatable row.add with button click functionality

Fill in a data table beginning with the column next to the first

Receiving an error message stating "The JSON value could not be converted to System.Int32" when attempting to post JSON data via AJAX to a Web API

Unlocking the Magic of JSONP: A Comprehensive Guide

How to Toggle a RequiredFieldValidator on/off with a Checkbox in ASP.NET using C#.NET and jQuery/JavaScript

Issue with preventdefault() function in Internet Explorer 8

Tips on moving the first item on the Bootstrap navigation bar to the left side

Adjust the dimensions of a Three.js generated 3D cube dynamically during execution

What is the most efficient way to substitute text within an HTML document?

Ways to deactivate the Bootstrap collapse feature

JavaScript not functioning properly with HTML loaded via .load()

The .val() method is compatible with input fields, but does not work

Css styling for text highlighting

Discover the best way to integrate your checkbox with your Jquery capabilities!

Is the presence of hidden list items leading to excessive white space?

Exploring the dynamic world of Angular2 animations paired with the

Eliminate redundant sets of comma-separated numbers from the jQuery input text value

Tool that closely mirrors the functionalities of Google Maps