Expanding Images for Optimal Display in Responsive Design

I have a collection of large images in various sizes that I need to display without any stretching inside a container with set height. The challenge is to make the image fit perfectly within the container without distorting its proportions. I must achieve this using HTML elements rather than background images. Below is my code:

.image-container {
  height: 420px;
  width: 100%;
}

@media (max-width: 480px) {
  height: 310px;
}

@media (max-width: 375px) {
  height: 275px;
}

@media (max-width: 320px) {
  height: 240px;
}

.image-container img {
  max-height: 100%;
  object-fit: contain;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
<div class="image-container">
  <img src="http://media.gettyimages.com/photos/under-the-tree-picture-id480585809" />
</div>

The current implementation is causing the image to stretch. Does anyone have a solution to rectify this issue? Your suggestions are greatly appreciated.

Thank you in advance.

htmlcssresponsive-design

Answer №1

Start by resetting the margins and paddings for all elements.

 * {
    margin: 0;
   padding: 0;
}

If the height or width is set to auto, it will not alter the original image.

.img-container {
    width: 420px;    // adjust as needed
}

.img-container img {
    width: 100%;
    height: auto;
    display: block;
}

Do away with the media queries. Your syntax seems to be incorrect; here's how you should use them:

@media (max-width: 480px) {
  .img-container {
      // modify properties here
   }
   .another-class-change-for-480px-max-width-of-screen {

   }
}

Answer №2

to prevent distortion in your website design, opt for using the max-width property rather than width in your CSS

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

Answer №3

A new method to address this issue is by utilizing the object-fit property for images (IMG tags).

Please note: This approach is not compatible with Internet Explorer 11. Check for support here.

Both images displayed below are identical. The second image incorporates the use of object-fit: cover. 

.fitImage {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="">
<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="" class="fitImage">

Implementation using jQuery

$(document).ready(function() {
  $(".fitImage").each(function(index) {
    var imageUrl = $(this).find('img').prop("src");
    $(this).css('background-image', "url(" + imageUrl + ")")
  });
});
.fitImage {
  height: 200px;
  width: 200px;
  background-size: cover;
  background-position: center;
}

.fitImage img {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fitImage">
  <img src="https://i.picsum.photos/id/292/200/300.jpg" alt="">
</div>

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

Having trouble with setting the margin-top of a div?

When I attempted to apply the margin-top property to a div's style, it didn't have any effect. https://i.stack.imgur.com/jyY2G.png Below is the code snippet: .side { margin-left: 65%; margin-top: 3%; margin-right: 3%; border: 1px sol ...

htmlcssmargin

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Expanding the last row to ensure its proper width with flex-grow

I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...

htmlcssresponsive-designflexboxflex-grow

Enclosing floated elements within a parent div

Looking for a way to make a div wrap around a changing number of child elements without specifying a width for the parent? I've managed to get the content wrapping by floating both the child and parent elements, but I'm facing an issue when the ...

htmlcss

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png Something like this: https://i.sstatic.net/rfqAB.png Here is my current code: <template> <v-container class=" ...

cssvue.jssassvue-componentvuetify.js

What is the contrast between specifying a MIME type and omitting it?

If I were to write a stylesheet in an HTML document, it's worth noting that since the introduction of HTML5, the type attribute is no longer necessary as text/css has become the default and only possible value: <style type='text/css'> ...

htmlcssmime-typesmedia-type

Display a single submenu on mouseover using Javascript

Hello there, I have been working on creating a small menu using only Javascript, but I am facing an issue where the onmouseover event is displaying all submenus instead of just one. Below is the section of code that is supposed to change style.display to ...

javascripthtmlcss

Achieving a Pushing Footer Design with Content

Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: . Here is my HTML/CSS code for the footer: ...

htmlcssfooter

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Recently, I decided to enhance my understanding of JavaScript by experimenting with it on various websites. My goal was to use JavaScript to remove the right bar from a webpage and have the remaining body text automatically fill in the space left behind. ...

javascripthtmlcss

Is it possible to create varied background shades in CSS3 without relying on images?

Check out this fiddle: http://jsfiddle.net/dzAJp All the divs are styled with a light blue background color using the background-color CSS property instead of background-image. I want to darken the second div slightly by combining its current background ...

css

Guide on using jQuery to automatically scroll to the HTML container related to a clicked letter

I am in the process of finalizing my wiki page and I wish to add a specific function. My goal is that when a user clicks on a letter in the alphabet bar, the browser will smoothly scroll to the corresponding letter within the wiki column. However, I am en ...

javascriptjqueryhtmlcss

Having trouble with button alignment in the header with Bootstrap 3?

Using Bootstrap 3 and looking to adjust the alignment of a star icon with the title in my HTML page. Here is the current setup: <p class="pull-right visible-xs"> <h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500 ...

htmlcsstwitter-bootstrap-3

Tips on extracting JSON information in JavaScript when the key name is unspecified

I have a challenge in parsing JSON data where the property name is unknown. Below is a snippet of my code, and I need your help in figuring out how to retrieve all data with an unknown property. datas.data.videoGroup.past, then utilize a loop $.each(data ...

javascripthtmljson

Challenges arise when working with arrays: Attention required - Offset 0 undefined

I have encountered a challenge with my PHP code. I am attempting to convert an HTML table into an array and then execute a mysqli query, but I am unsure about the process. In my code, I have a variable $aDataTableDetailHTML[][]. The first set of brackets ...

phphtmlmysqljson

Encountering an issue when adding SASS Compass Breakpoint to my development project

I'm having trouble integrating breakpoints into my web project. I have SASS, Compass, and breakpoint all installed and I've followed the installation instructions, but it seems to be causing errors. Can someone help me troubleshoot the issue? He ...

cssruby-on-railsbreakpoints

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Currently, I am utilizing the kendo ui mobile listview and encountering an issue when setting endlessScroll or loadMore to true. The problem arises as the listview only displays the first item in such instances. Upon inspecting with Chrome inspector, I ob ...

javascriptcsslistviewkendo-ui

Restrict the usage of JQuery to display HTML code a restricted number of instances

On my webpage, I have the following HTML code and I am attempting to insert a small piece of HTML after each feed item. However, I only want this additional HTML to be displayed three times. The HTML: <div class="wp_rss_retriever"> <ul class=" ...

jqueryhtml

Merge HTML documents with this powerful JavaScript library

Our team has developed an email generator that creates HTML emails based on specific parameters. Users can simply select or deselect options and the email will be regenerated accordingly. Occasionally, users may need to make minor manual changes to the co ...

javascripthtmlmerge

Using the html5-canvas element to drag connected lines

Here is an example of creating four points and connecting them: sample. My goal is to make it possible to drag the entire line connection when clicking on it, but when clicking on a circle, only that specific circle should be extended (already implemented ...

javascriptjqueryhtmlhtml5-canvas

What is the best way to ensure consistent Box Overlay Height across multiple boxes?

Is there a way to ensure that overlay box height remains the same even if the text lines are not the same length? Below is a snippet of my code. If you have a solution using jQuery or JS, please provide it. Thank you for your time and effort in trying to h ...

jqueryhtmlcss