Ensure the image is seamlessly incorporated into the div container without sacrificing any of the content in your CSS

I am facing an issue with a div containing two images. I want the second image to adjust within the div while maintaining its aspect ratio.

This is a snippet of my code:

.box {
  width: 640px;
  height: 540px;
  float: left;
  overflow: hidden;
}

.img-border {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  margin: 5px;
}
<div class="box" id="target">
  <div align="center">
    <img src="http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width="60%" height="60%">
  </div>
  <img class="img-border" id="imgQues" src="https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
  <div class="comment" id="chatbox">
  </div>
</div>

The issue lies in the fact that the .img-border class is not adjusting properly within the .box div while also maintaining its aspect ratio.

Is there a way to make the second image, img-border, fit within the div and retain its original ratio?

htmlcss

Answer №1

Here is a suggestion to address your issue:

.container {
  width: 640px;
  height: 540px;
  float: left;
  overflow: hidden;
  /**
    Custom visualization 
  **/
  background: gray;
}

/**
  Customize these classes as needed
*/
.container__first,
.container__second {
  float: left;
  width: 49.99999999%;
}

/**
  Ensure images take up full space
*/
.container img {
  width: 100%;
}

.img-border {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  margin: 5px;
}
<div class="container" id="target">
  <div class="container__first" align="center">
    <img src="http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width="60%" height="60%">
  </div>
  <div class="container__second">
    <img class="img-border" id="imgQues" src="https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
    <div class="comment" id="chatbox">
    </div>
  </div>
</div>

You are not restricted to these exact HTML changes, but this method may provide a cleaner solution. The key idea is to make sure the images always occupy full space and align the elements in succession using float.

Update:

https://i.sstatic.net/a4jw7.png

jsfiddle - option 1

https://i.sstatic.net/W9bjZ.png

jsfiddle - option 2

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

What could be causing this compatibility issue between IE and Chrome? It's strange that the Table is displaying correctly only in Chrome

Recently, I encountered a challenge with my code in Chrome and realized that it also needs to work in Internet Explorer. Can someone assist me in making it fully functional in IE? I suspect that there might be specific code adjustments needed for IE as th ...

javascriptcsshtml

Show the Select component in a grid format with a list view, displaying three items per row

Within my react Dropdown component, there is currently a list view displayed when an item is selected. However, I am looking to modify it so that the items are arranged in a grid format with 3 items per row. Sample Code: import { Dropdown } from 'pri ...

cssreactjs

Place an image in the middle of a div with text aligned to the right side

How do I center an image within a div that has text on the right side? The page layout is based on percentages and I want the image to be perfectly centered with the text floated to the right. This is what I currently have: IMG.logo { display: block ...

javascriptcsshtml

Tips for customizing a button's font with CSS

Update: I have noticed that the issue mentioned in this question is specific to OS X browsers. I am looking to modify the font style of my input buttons using CSS, similar to the following: input[type="button"] { font: italic bold 3em fantasy; } How ...

htmlcssbrowserfontscross-browser

Guidelines for naming classes in scss when working with Next.js

Is it possible to use CSS naming conventions in SCSS files with Next.js and then import them into JavaScript using a different convention? // login.module.scss file: .login-button { // some scss styling } // Login.js file: import styles from './ ...

javascriptcssreactjssassnext.js

Struggling to eliminate the remaining vertical paddings within the <div> element while utilizing Bootstrap 5

I want to eliminate all padding (top + bottom) for text inside a block using Bootstrap 5. When I use HTML without Bootstrap, setting padding: 0px works as expected: <div style="padding: 0px; background-color: gray;">no bootstrap</div&g ...

htmlbootstrap-5paddingspacing

Changing the CSS class of a div using Shiny

One of the features in my Shiny app is a select menu which is represented in the code snippet below. selectInput( "mySelectMenu", "", c(1,2), selected = NULL, multiple = FALSE ) I have set up actions to be t ...

cssrshinyshinyjs

Exploring the utilization of attributes with slots in Vue.js

Can attributes be set on a slot so that the element from the parent inherits those attributes? Parent <vDropdown> <button slot="button">new button</button> <ul>content</ul> </vDropdown> Dropdown.vue <d ...

htmlvue.jsvuejs2vue-componentvue-slot

Generate two separate CSS files (Mobile and Desktop versions) by compiling a Stylus (.styl) file using Node.js

Can a single Stylus file be compiled into two separate CSS files? For example, one optimized for mobile without the -moz and webkit elements, and another for cross-browser applications? Thank you. ...

cssnode.jsstylus

Position the title of the Bootstrap selectpicker field to the right

I utilized Creative Tim's Material Dashboard Pro to create a select field. My goal is to align both the select field and its options to the right. Currently, I have only been successful in aligning the options while the title and selected option rema ...

cssselectbootstrap-4right-to-left

"The CSS animation effect for underlining text does not seem to be

I'm trying to create a CSS animation using the transform property. Specifically, I want to have an underline animation when a link is hovered over. Strangely, the code that works in another HTML file is not working here. Although the links change colo ...

htmlcsstransform

Grabbing numerous selections from a dropdown menu

I am looking to extract multiple options from a dropdown menu and then send them via email. I have attempted the given code below: HTML: <select name="thelist[]" multiple="multiple"> <option value="Value 1">Value 1</option> <option v ...

phphtmlarraysdrop-down-menu

Selenium: A guide to specifying CSS for webpages with multiple elements sharing the same name

Looking for assistance with CSS selection: <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <div class="numCellWrapper"> ... When defining a css selector, how can I target a specific element among multiple elements of the same ...

cssselenium

What is stopping jQuery from displaying the entire parsed PHP array?

I am attempting to store my product table in an array and utilize JSON for passing it to jQuery, followed by using jQuery and HTML to display it to the user. This is the PHP code used for populating the array: $sql= "SELECT * FROM XXXXXXXXX"; $result = ...

phphtmljquery

JavaScript is unable to bring in an npm module

Having trouble importing an npm module using import fs from 'fs'; in my main.js file that is linked with index.html. The script tag connecting the JS file has the attribute type="module". However, the browser console shows the error: Un ...

javascripthtmlnpmimportmodule

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Summary: Here is the desired end result shown in the image below. Alternatively, you can refer to the JSFiddle. Ideally, only CSS should be used without changing the DOM structure. The icons need to be aligned completely to the right using the .pull-right ...

csshtmltwitter-bootstraptwitter-bootstrap-3

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml

Angular encounters issue when retrieving CSS file while navigating to a nested route

When trying to access a child component directly in production mode (using ng serve --prod), it fails to load the CSS file as it attempts to fetch it from a nested path. For example, when navigating to "localhost:4200/doc/", the CSS Request URL is: loca ...

cssangular

Steps to redirect to a webpage by clicking on an image without relying on anchor tags

Is it possible to redirect to a new webpage without using an anchor tag when someone clicks on an image? Below is my code for the image. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_l ...

javascripthtmljquerycss

Utilize Jquery to dynamically update form input in real time based on checkbox selections

I am working on a form that requires real-time calculation of GST (Goods and Services Tax) directly within the form (GST = Price/11) This functionality has been implemented with the following script. Additionally, the calculation needs to be adjust ...

javascriptjqueryhtmlformscheckbox