Tips for aligning a `img` element with absolute positioning within a `div` element while preserving its original aspect ratio

Here is an image along with its corresponding CSS:

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

.img {
    margin: 0 auto;
    position: absolute;          /*I cannot remove the position:absolute unfortunately*/
}

Below is the markup used:

<div class="containerImg">
<img class="img" alt="" src="img//section_es_2442.jpg">
<div class="info">
        …
          </div>
<div class="clear"></div>
</div>

If you take a look at the post, you'll notice that the image isn't the only element within .container

The desired behavior is for the image to utilize all dimensions of .container and crop the image while maintaining the original ratio. The images are sized at 1600x500 (3.2:1)

Any suggestions on how I can make this work?

htmlcssimageaspect-ratio

Answer №1

If I were in your shoes, I'd recommend utilizing background-image in place of the img tag with the following code:

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

.img {
    margin: 0; 
    /*position: absolute;    I'll remove this */
    height: 420px;
    width: 100%; /*or use pixels*/
    background: transparent url('') no-repeat center top;
    overflow: hidden; /* not sure about you really need this */
}

Here's how to implement it:

<div class="containerImg">
  <div class="img" style="background-image: url('img/section_es_2442.jpg')"></div>
  <div class="info">
        …
  </div>
  <div class="clear"></div>
</div>

The concept involves having a div serving as a viewport, and the image with the same aspect ratio and size will be set as the background. If the image is larger, the excess will be cropped similar to "liking" it :)

Answer №2


.imageContainer {
     width: 120px;
     height: 120px;
     position: relative;
     overflow: hidden;
     }
     .croppedImage {
     position: absolute;
     max-width: 120px;
     width: expression(this.width > 120 ? "120px" : true);
     max-height: 120px;
     height: expression(this.height > 120 ? "120px" : true);
     }

jQuery(window).load(function(){
    jQuery.each($(".croppedImage"), function() {
    $(this).css("margin-left",(($(".imageContainer").width()-$(this).width())/2));
    $(this).css("margin-top",(($(".imageContainer").height()-$(this).height())/2));    
    });   
    });


<div class="imageContainer"><img class="croppedImage" src="images/sample1.jpg"/></div>
<div class="imageContainer"><img class="croppedImage" src="images/sample2.jpg"/></div>

Answer №3

It's a bit unclear what you're asking, but have you considered setting the image as a background?

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
    background-image: url("img/section_es_2442.jpg");
    background-position: center;
}

Alternatively, you could dynamically generate it using the style attribute within the <div class="containerImg">

Answer №4

.image {
    margin: 0 auto;
    position: absolute;
    max-height: 420px; /* Ensure the image does not exceed container height */
    height: expression(this.height > 420 ? "420px" : true;    
}

If you also need to control the width, make sure to specify a fixed value for the container...

Keep coding joyfully! 😊

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

What could be causing my JSON file not to display when the onclick event is triggered?

I am currently learning JavaScript and JSON, as I am enrolled in a class that focuses on these topics. Our latest project requires us to create a JSON file and use a button along with JavaScript to display its contents. I have spent countless hours trying ...

javascriptjqueryhtmljsonajax

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

I am attempting to encrypt a .php file using phpBolt. It works fine when the file contains only PHP code, but it fails when there is a mixture of HTML and PHP. Here is the encryption code: <?php /** * src : source folder * encrypted : Output folde ...

phphtmlencryption

Implementing validation for multiple email addresses in JavaScript: A step-by-step guide

Currently, I am utilizing Javascript to perform validation on my webpage. Specifically, I have successfully implemented email validation according to standard email format rules. However, I am now seeking assistance in enhancing the validation to allow for ...

javascripthtmlvalidationemail

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

c#javascriptjqueryhtmloauth-2.0

How can I make my Twitter Bootstrap carousel actually start "carousel"-ing?

I often find myself in over my head with programming, but I am giving it my best shot. Please be patient with me! Recently, I followed a tutorial on YouTube to create a carousel in my Django project. Unfortunately, instead of displaying one image at a ti ...

htmldjangotwitter-bootstrapcarousel

Dynamic menu causing interference with other elements of the code

When the width reaches a maximum of 37.em, the navigation styled under a hamburger menu automatically opens. I would prefer it to remain closed rather than open when scaled to that size. It also allows the underlying menu underneath it (div.gallery with cl ...

javascripthtmlcss

Utilizing the GROUP BY clause within an INNER JOIN operation, and presenting the results in an HTML dropdown menu

My database includes the following tables: Workers (id, total_pay, date_of_pay, projects_id) Payments (id, payment, date, projects_id) building_materials(id, pay_of_materials, date, projects_id) additional(id, add_pay, date, projects_id) All tables have p ...

phphtmlmysql

What is the maximum size allowed for a background image in CSS?

Within a 70 by 50 px box, I have various SVG images with different aspect ratios - some portrait and others landscape. Setting background-size: 70px auto; works for landscape images but distorts the portraits by stretching them vertically. Is there a way t ...

htmlcssimage

Glitch discovered in the if statement implementation in PHP and HTML

<img id="post_like_btn_<?php echo $post_info['id']; ?>" class="post_like_btn" <?php $like_result = data_like($dbc, $user_info['id']); while($like_info = mysqli_fetch_assoc($like_result)){ if($post_info['id' ...

phphtml

Ways to include ".com" content statically in HTML on a website with a .org domain

I need to modify the content of a webpage in HTML. Example 1: Whenever I change the domain name to end with .com, the URL within my content automatically updates to www.example.com. Here is an example: dotCOM Example 2: Similarly, if the domain name en ...

javascripthtmlurldnsdomain-name

What could be causing the mysterious line appearing underneath my bootstrap forms?

I have created a CSS sticky footer that is designed like so: #foot { position:fixed; left:0px; bottom:0px; height:30px; width:100%; text-align: right; padding-top: 7px; font-size: small; background-color: none; } However, a mys ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

Moving the element from the right side

Is there a way to change the direction of this element's transition from left to right, so that it transitions from right to left smoothly without any gaps between the element and the edge of the page? @keyframes slideInFromRight { 0% { trans ...

css

Unable to display a horizontal scroll bar

I'm having some trouble with implementing a horizontal scroll feature and can't seem to make it work. If you want to take a look, here is the fiddle Please provide me with assistance in identifying what mistakes I may be making edit Here is th ...

htmlcss

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

javascriptjqueryhtmlcss

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...

javascripthtmlcsscarousel

positioning a div based on the location of another div

I am currently working on aligning a div that sits at the bottom of all other divs. The last div is set to float and aligned at the top using CSS. I am unsure how to align it from the left side without any issues when the screen resolution changes. Is th ...

csshtml

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

Hierarchical selectors do not function properly with styled components

Trying to get the hang of styled components, but struggling with targeting CSS classes in hierarchy. Specifically, I want to apply styles when a user hovers over navigation links. Below is my navbar code: import React from "react"; import { Nav, Navbar } ...

cssreactjssassstyled-components