Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images.

However, at the largest media query where the flexslider container is 750px wide, landscape images work well but portrait images become oversized. The width of the portrait image matches the container size, leading to a height that requires scrolling to view the entire image.

I attempted to address this by setting max-height: 750px in the CSS, which did resolve the height issue. However, flexslider then distorts the image to fit a 750px x 750px square.

Is there a solution to make flexslider maintain the aspect ratio and adjust the width based on the max-height? This way, portrait images would be 750px tall while preserving their original proportions.

jquerycssflexslider

Answer №1

Do you need help with the zoom functionality of Flexslider or how to display thumbnails in a scrolled toolbar? Regardless, there is one solution that can address both scenarios:

<style>
figure {
    outline: green solid 1px;
    padding: 2px;
}
img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;

    outline: red solid 1px;
    opacity: .5;
}
.scale img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    vertical-align: middle;
}
.toheight img{
    max-width: none;
}
</style>
<figure class="scale toheight" width="200" height="200">
    <img src="http://placekitten.com/250/300"/>
</figure>

If you want to crop or scale an image within a container, you can check out this solution on jsfiddle.

For a related question on how to align a cropped element horizontally, visit this link.

Answer №2

To ensure the image retains its aspect ratio, it is recommended to keep the default settings. However, if a width: 100%; parameter was previously set, you should modify it to width: auto,. This will allow your max-height: 750px rule to have higher priority.

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

An error occurred - 0x800a1391 - JavaScript runtime error: The function 'SelectAllCheckBoxes' has not been defined

I'm currently in the process of learning web development and I am trying to incorporate jQuery into my ASP .NET page. Within the header section, I have included the necessary references: <head id="Head1" runat="server"> <link href=" ...

c#javascriptjqueryasp.net

The left and right DIVs are not automatically adjusting to the height of the container

I am currently working on a grid layout consisting of 9 div tags, creating 3 rows with 3 divs in each row. Within this grid, each div is supposed to have a background image, except for the second div in the second row. My main challenge lies in getting th ...

css

How to dynamically populate a select option with data from a database in CodeIgniter 3 and automatically display the result in a text

How can I fetch select options from a database in CodeIgniter 3 and display the result in a text field and span area? Currently, I am only able to display data from the row_name when an option is selected. Here is my current implementation: <?php $query ...

javascriptphpjquerymysqlcodeigniter

CSS Dropdown Menu Malfunctioning

I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...

csshtmldrop-down-menu

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two l ...

javascripthtmlcsssearchfilter

What is the method for aligning text to the right side within a ListItem?

Currently, I have these elements where the "YoYo" text is aligned to the left by default. However, I am looking to adjust the positioning of some "YoYo" texts so that they can appear on the right side. I attempted to provide a style object with justifyCon ...

cssreactjsflexboxmaterial-ui

Is there a way to prevent EasyTabs from automatically selecting the second tab?

I'm facing an issue with setting the default tab using easytabs. Currently, the second option is automatically selected as the default tab. Previously, I had successfully set the first tab (statistics) as the active tab but lost the file. Now, I am s ...

htmlcss

Anticipated spatial glitch problem involving the gadicc/meteor-reactive-window package for Meteor

Utilizing the gadicc/meteor-reactive-window Meteor Package to switch templates based on screen size. This file is named pictureDisplatSection.html <template name="pictureDisplaySection"> <div class="display"> ...

javascriptjqueryhtmlmeteormeteor-packages

Vertical alignment to the top is not possible for Inline-Block divs

When attempting to create a responsive 'grid' with two (div) panels that appear side by side on wide screens and stacked on top of each other on smaller screens, I came across an issue where the divs align at the bottom when displayed as 'bl ...

gridvertical-alignmentcss

jQuery document.ready not triggering on second screen on Android device

Why is jQuery docment.ready not firing on the second screen, but working fine on the first/initial screen? I also have jQuery Mobile included in the html. Could jQuery Mobile be causing document.ready to not work? I've heard that we should use jQuery ...

javascriptandroidjqueryhtmljquery-mobile

Ways to superimpose an image

Struggling to overlay an image over two div columns - I attempted using Z-index and experimented with various positioning properties. What am I missing? The triangle situated behind the two boxes, along with the additional text on JSFiddle, should appear ...

csshtmlz-index

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

javascriptjquerycsshtml

The installation of @types/jquery leads to an unnecessary global declaration of $

In my package.json file, I have the following dependencies defined: { "dependencies": { "@types/jquery": "^3.5.5", } } This adds type declarations through @types/jquery/misc.d.ts, including: declare const jQuery: JQue ...

jquerytypescript

Displaying a progress bar while fetching data in Vue: A step-by-step guide

I am working on developing a progress bar using vue js and bootstrap for my desktop application. Within the template, I have the code that will generate the necessary markup: <div class="container-fluid p-0 vh-100" v-if="isLoading&quo ...

javascripthtmlcssvue.jstwitter-bootstrap

Get and show the response from a jQuery GET call

I'm currently working on fetching and displaying data using the ESV API available at Interestingly, the code seems to be functioning properly within the codecademy.com domain but is encountering issues on the esvapi.org domain. Here's a lin ...

javascriptjqueryajaxapiget

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

javascriptjqueryhtmlajax

Is there a way to automatically dismiss a notify.js notification?

I am currently attempting to forcefully close an opened notification by clicking a button, following the instructions provided in the advanced example of the notify.js API. Can someone please explain how this can be accomplished? function CLOSE() { $( ...

javascriptjquerynotifyjs

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

javascriptphphtmlcss.htaccess

Issue with .submit() not submitting form after setTimeout timer runs out

How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...

javascriptjqueryhtml

JSON data displaying improper date format

After retrieving date from the database, it is in the following format: {5/13/2002 12:00:00 AM} Once this is passed as JSON and bound to a textbox, it appears like this: /Date(1021228200000)/ Is there a way to display the date in the correct format? E ...

javascriptjqueryjsondate