Can an image be resized to fill either the full height or width based on its orientation?

Looking to display a dynamic list of images with varying sizes and orientations - some landscape, some portrait.

The challenge is that the landscape images should fill 100% width of their parent container, while the portrait images should fill 100% height.

I've managed to achieve this by determining the image orientation server-side and applying the appropriate class for either full-width or full-height display.

Is there an alternative method to maintain aspect ratio without relying on object fit or background images?

htmlcss

Answer №1

To ensure proper display of images, utilize the max-height and max-width properties. Additionally, you can center the images to enhance the appearance of smaller ones.

ul {
  margin: 0;
  padding: 20px;
  list-style: none;
  }
li {
  width: 100px;
  height: 100px;
  float: left;
  border: 1px dashed red;
  margin: 0 20px 20px 0;
  }
img {
  max-width: 100%;
  max-height: 100%;
  }
<ul>
  <li><img src="https://pixabay.com/static/uploads/photo/2015/02/08/20/57/man-629062_960_720.jpg" alt=""></li>
  <li><img src="https://pixabay.com/static/uploads/photo/2016/01/08/15/21/man-1128277_960_720.jpg" alt=""></li>
</ul>

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

Angular binding for selecting all data

Upon checking a checkbox for a single item, the bound data is retrieved and added to an array. However, this does not happen when using selectAll. Code snippet in Angular for obtaining the object of a checked item: $scope.selectedOrganisations = []; $sco ...

javascripthtmlangularjs

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

javascriptphpjqueryhtml

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

htmlcss

I'm puzzled, can anyone provide clarification on the concept of xml?

Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...

javascripthtmlxhtml

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...

javascriptjqueryhtmlcssvue.js

Looking for a search box that functions like Google's search feature

I am attempting to create a text box similar to the Google search text box... So far, I have implemented a feature where, upon entering a character, words starting with that character are displayed in a div using AJAX. This functionality is working well, ...

phpjqueryhtmlajax

CSS - Problem with background image appearing stretched on Samsung mobile devices

Is the Samsung default "Internet Browser" based on another build? It seems to have trouble displaying stretched background images correctly, unlike desktop browsers or Chrome for mobile. Here is the CSS and HTML I am using: #bk_img { height:100%; ...

css

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

javascriptphphtmlmysqljson

Enabling or disabling select input based on the selected option in a previous select dropdown

My goal here is to customize a select input with 3 options: Sale, Rent, Wanted. Based on the selection, I want to display one of three other select inputs. For example, if "Sale" is chosen, show the property sale input and hide the others. However, when su ...

javascriptphpjqueryhtml

Retrieve a pair of columns from the database by utilizing SQLalchemy

Currently, I am delving into Python and endeavoring to generate a drop-down menu within my form by utilizing data from another table. Here is the code snippet I have been working on: In my Models.py file: class empmasterModel(db.Model): __tablename__ ...

pythonhtmlmysqlflask-sqlalchemy

Guide on how to align multiple divs at the center of a container using CSS

Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...

htmlcss

Adjust the input and transition the UI slider

Currently, I am facing an issue with two sliders and inputs. When the number in the top slider is changed, the number and slide in the bottom block do not update accordingly. What steps should I take to address this? $(document).ready(function() { var $ ...

javascriptjqueryhtmljquery-uislider

Break down and simplify the code into individual components

<input type='button' class="myButton" onclick="document.body.style.cssText+=';background-image: url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';" value="S ...

htmlcss

JavaFX text label does not adjust its font according to the CSS file

In my FXML file, the structure is as follows: ... <BorderPane id="header"> <right> <Label styleClass="title" text="A Label" /> </right> </BorderPane> ... I also have a CSS file with the following content: #h ...

cssjavafx

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

After watching a tutorial on YouTube by Gary Simon, I attempted to animate text using GSAP. Despite following the instructions meticulously and copying the CDN for GSAP and CSSRulePlugin just like him, nothing seems to be happening. Even setting my border ...

javascripthtmlcssgsap

Unable to conceal a div element on mobile devices

Creating a unique bootstrap theme for Wordpress and encountering an issue with hiding the "sptxt" text on mobile screens. <div class="row"> <div class="col-lg-5 col-sm-12"><div id="gr"></div></div> <div class="col- ...

twitter-bootstraphtmlhide

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

Enhanced customization of material-ui styles

After exploring various resources on styling overrides, I encountered a unique challenge. I am engaged in crafting styled material-ui components and integrating them across different sections of my application. My objective is to enable the customization o ...

cssreactjsmaterial-ui

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

cssangularionic-frameworksassshadow-dom

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

htmlcssmenu