Adjust image size to fit within dynamically generated container

Struggling to fit the image student.jpg within a DIV.

The condition is that galleryWrap should be inside logOuterWrap. The goal is to place student.jpg inside galleryWrap.

Using jQuery:

galleryID++;
var logOuterWrap = $("<div/>",{class: "galleryBox", id: "main"+galleryID }).appendTo("#galleryContainer")
var galleryWrap = $("<div/>",{class: "galleryInner", id: "gallery"+galleryID }).appendTo(logOuterWrap)

galleryWrap.append(
            $("#gallery"+galleryID).html("<img src='img/student.jpg'/>"),"<br />");

CSS:

#galleryContainer{
     width: 100%;
     height: 100%;
     background-color: #fff;
}
.galleryBox{
    background-color: #00ff00;
    width: 75px;
    height: 75px;
}
jqueryhtmlcss

Answer №1

Here is the resulting HTML structure:

<div id="galleryContainer">
    <div class="galleryBox">
        <div class= "galleryInner">
            <img src="..." />
        </div>
    </div>
</div>

To ensure the image fits without distorting its proportions, use this CSS:

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

Check out the demo here.

If you want to center align the image both horizontally and vertically, add the following CSS:

.galleryBox{
    background-color: #00ff00;
    width: 75px;
    height: 75px;
    position: relative;
}

.galleryInner img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

View the centered alignment demo here.

Answer №2

To replace an Img tag, utilize the galleryWrap background for displaying the image and include background-size:cover

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

Difficulty with rendering content from Angular routes

Currently, I am working on a movie application where users can click on a details button to view information about a specific movie. However, I am facing an issue in displaying the information for the selected movie without showing all the movies at once. ...

javascripthtmlangulartypescript

Is it considered a bad practice to use the record ID on a <tr> element for an editable row within a table?

I am in the process of using jQuery to create a feature that allows users to edit a HTML table containing category names. Currently, I have successfully populated my table using PHP/MySQL. While researching on jQuery - Edit a table row inline, I came acr ...

phpjqueryhtml

Tips for accessing the elements of an associative array passed from PHP to JavaScript via AJAX in JavaScript

Currently, my task involves retrieving and displaying a multidimensional array from a PHP file using an AJAX function. The structure of the array in the PHP file is as follows: Array ( [0] => Array ( [username] => klara [lev] =& ...

javascriptphpjqueryarraysajax

Issues arise when attempting to implement PHP loops within an AJAX call to generate dynamic content

Lately, I've been working on injecting some dynamism into one of my websites. It's predominantly php-based, and I wanted to explore the option of dynamically changing pages using ajax. However, I encountered a hurdle when it came to integrating p ...

phpjqueryajax

Utilizing LocalStorage in conjunction with the redux state management

Currently, I am working on a single-page application using React and Redux. I have encountered the need to store certain data locally and ensure that it remains synchronized with the appState in local storage, even after a page refresh. Despite being new ...

javascripthtmlreactjsredux

Having trouble transferring the file from HTML to PHP during the upload process

I am encountering an issue where I cannot see the file when trying to check if it has been uploaded or not. Every time I select the file, it prints out a message saying "please select the file." Can someone assist me with this problem? <html> &l ...

phphtmlmysql

Is there a way to trigger a POST request when a user closes the tab or browser?

Here is my current progress: window.addEventListener("beforeunload", function(e){ $.post('insert.php', {'postmessage':'CALL bor.update_records_exit(\'' + authUser + '\');'}, functi ...

javascriptjqueryajaxonbeforeunloadsendbeacon

Troubleshooting problem with Bootstrap file input on deployment

Having an issue with the Bootstrap file input package - it's working fine locally, but failing on production. Here is how it looks in VS And after deployment I've read that the problem might be with the js files not loading correctly, but I ha ...

javascriptjqueryasp.nettwitter-bootstrapiis

What is the best way to load a URL on a background page in a chrome extension?

At the moment, I am loading tabs and opening the necessary URLs to scrape data from them. However, this method appears messy and I want to avoid opening tabs in front of the user. I have noticed that there are numerous Chrome extensions that can efficient ...

javascripthtmlgoogle-chromegoogle-chrome-extension

How can I make the text color change when the mouse hovers over it and revert back when the mouse moves away using HTML?

How can I use the onmouseover event to change the background color of a <td> element with the class 'topic_name'? <td dir="rtl" class="topic_name" onmouseOver=""><\td> The CSS for the 'topic_name' class is as fo ...

htmlcss

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

Launching a call to action through Ajax in Zend Framework triggers a redirect, but subsequent calls prove to be effective

I've encountered an intriguing issue that I'm hoping someone else has come across and resolved before. In this particular application, I have implemented a 'change my password' option for users. If a user forgets their password, they c ...

javascriptajaxzend-frameworkjquery

Begin a new countdown timer upon clicking the next button

Currently, I am developing a bid auction website and I have implemented a countdown timer script. The timer works perfectly on the initial window load. However, when I click on the restart button, it fails to reset the countdown timer to a new value. < ...

javascriptjquery

Leveraging class names to dynamically apply CSS styles to components based on their props value

In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button. My goal is to lever ...

javascriptcssreactjsmaterial-uiclass-names

Trouble with connecting CSS files

Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still pers ...

htmlcssfilefile-link

Customize a jQuery image slider with varying image widths for a unique touch

I am working on a project to create an image slider with specific requirements: - Infinite loop - Two rows - When the next or previous button is clicked, the slider should move by the width of the upcoming image. Below is a snippet of my HTML: <div c ...

jqueryslider

Query Dialog Search Form

Looking for some guidance on how to set up a search form in a Jquery Dialog that works through AJAX. I attempted the following code: <%= form_tag teachers_path, :method => 'get', :remote=> 'true' do %> <%= text_field ...

jqueryruby-on-railsrubyajax

Incorporate photo thumbnails into Material UI cards

I am currently using Material-UI card component in my React web application. The card is quite plain and only has a title. I would like to enhance it by adding a thumbnail on the left side of the card, followed by the title, similar to how song lists are d ...

javascriptcssreactjsmaterial-ui

Creating a consistent menu header across multiple webpages without the need to manually inserting the HTML on each individual page

Is there a way to display a consistent header across all web pages without manually duplicating the HTML code for each one? I'm looking to achieve this with JavaScript, without utilizing PHP. Would it be possible to leverage Angular JS ng-include func ...

javascripthtmlangularjs

ASP.NET - Severely struggling with connectivity issues involving AJAX/JQUERY

I have developed a real-time update script that refreshes certain div elements with server-side information every second. The issue I am facing is that the script seems to be causing heavy usage, as even my mouse animation in Google Chrome keeps loading. ...

asp.netjqueryajaxweb-services