Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using width: auto and height: auto, I have not been successful in achieving the desired result. The closest I got was adjusting the picture size on the x-axis, but this resulted in cutting off the images on the y-axis. I aim to ensure that the entire content fits within the window size at all times, and I also want to arrange 5 pictures side by side.

.image {
  position: top-left;
  object-fit: cover;
  height: 19%;
  width: 19%;
}
<div id="container">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
</div>

htmlcss

Answer №1

Implement a grid layout along with setting a max-height using vh and max-width using vw for each element based on the number of items present:

#container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    max-height: 100vh;
    max-width: max-content;
}
.image {
    max-width: 20vw;
    max-height: 33.33vh;
}
<div id="container">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
    <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
    <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
  <img class="image" src="https://www.lkz.de/cms_media/module_img/2197/1098748_2_detailbig_5f52b830aced9.jpg">
</div>

If screen size is wide:

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

If axis-Y shrinks:

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

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

Selecting the perfect default font using font-display: fallback

When I use a particular font and find that its loading time is too high, I want to set a default font. So I experimented with the following code: font-display: fallback; It seems to be working fine (although I haven't checked compatibilities yet), ...

css

How can you reset the chosen option in a Vue.js dropdown menu?

Within my dropdown menu, I have included a button that is intended to clear the selected city. Despite adding an event, the selected option is not being cleared. Can anyone provide insights on what I might be missing? Thank you in advance. Below is the bu ...

javascripthtmlvue.jsvuejs2

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

Tips for minimizing the spacing between a label, span, or paragraph that causes the text to wrap

I recently created a label with text inside it. However, when I shrink the screen size, the label splits into two lines but the spacing between them is too wide. How can I narrow down this space? Below is the code snippet: <div class="col-xs-12 textA ...

htmlcss

Extract information from page 1 to page 2 by utilizing ajax

Greetings, I am currently facing an issue with parsing data using the href get method to retrieve PHP by ajax on another page. Is this achievable? By the way, my framework of choice is CODEIGNITER. This is my HTML href code snippet: <a href="'.b ...

phpjqueryhtmlajax

What is the best way to send a parameter from jQuery to PHP?

I am trying to create a simple button that, when clicked, will pass a value from jQuery to a PHP file for execution. The idea is that when the button is clicked, it triggers an onclick event which sends the number "1" to the jQuery code. Then, jQuery shoul ...

phpjqueryhtml

Retrieve information from a JSON API on one server and showcase it on an HTML page hosted on a different server

I have a situation where I need to transfer data from one project (Project1) to another project (Project2). To achieve this, I decided to convert the Project1 data stored in a database into a JSON API and then call it using an HTML page from Project2. Howe ...

javascriptjqueryhtmljson

Tips for dynamically adjusting the size of a div container according to the user's

I have been working on a unique landing page design featuring a menu made up of custom hexagons. I aim to make these hexagons dynamically adjust to fill the entire screen based on the user's resolution, eliminating the need for scrolling. For a previ ...

javascriptjqueryhtmlcss

Leveraging Modernizr for identifying drag and drop functionalities

On my website, there is a section that requires drag and drop functionality in HTML5. I want to inform users on the homepage if their browser supports this feature. Despite attempting to use Modernizr, I have not been successful. I generated a custom file ...

html

What's the reason my JavaScript isn't functioning properly?

Brand new to coding and I'm delving into the world of Javascript for the first time. In my code, there's a checkbox nestled within an HTML table (as shown below). <td><input type="checkbox" id="check1"/> <label th:text="${item.co ...

javascriptjqueryhtmlcheckbox

How to apply an icon image using the background property in CSS in Vue 3

Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...

cssvue.jsvuejs3

Create a stylish bottom border exclusively for the text that has been wrapped

My goal is to create an underline that perfectly fits the width of the text on the bottom row, without extending beyond it. The desired effect is shown in Figure 1. Figure 1 Here is the HTML I am currently using: <h2><span class="inline-block"& ...

borderinlinecssunderline

What is the method for adjusting the position of materialize CSS select options?

https://i.stack.imgur.com/b9p9T.png One issue arises when I open the Materialize CSS select, as the options end up covering the input. Ideally, I prefer the options to appear underneath the input. <div class="input-field "> ...

htmlcssselectmaterialize

Problem with stacking order in Internet Explorer 7

Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...

cssinternet-explorerz-index

Switching FontAwesome Stacks on Hover

I'm facing a challenge with creating a quick animation that replaces an entire span on hover. How can I successfully approach replacing a span on hover? <h1>I am looking to have this element replaced...</h1> <span class="fa-stack fa-lg ...

htmlcssfont-awesome

Steps to eliminate the select all checkbox from mui data grid header

Is there a way to remove the Select All checkbox that appears at the top of the checkbox data column in my table? checkboxSelection The checkboxSelection feature adds checkboxes for every row, including the Select All checkbox in the header. How can I ...

javascriptcssreactjsmaterial-uidatagrid

Guide to executing specific functions based on selected dropdown options in Angular 5

Several drop down menus need to be implemented. The requirement is that when an option from the drop-down is selected, a corresponding custom function should be called. However, in the code below, what should replace opt.mtd since it is not functioning as ...

htmlangulartypescript1.7

Counting checkboxes in jQuery version 1.9

I recently upgraded my website from jQuery 1.6 to jQuery 1.9.1, and now some of my old code is not working as expected. Specifically, I have a piece of code that handles checkboxes in table rows, allowing only up to 5 checkboxes to be active at once and di ...

javascriptjqueryhtmlcheckbox

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

jqueryhtmlcssmenu

What are the key benefits of opting for flexbox over solely relying on display: inline?

While it may be more convenient to use flexbox over older concepts like display: inline; float: right When comparing simply adding a container and using display: flex; versus changing each element inside the container to display: inline;, what are the be ...

htmlcssflexboxcss-floatinline