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

Contrasting :parent with a normal selector: What sets them apart?

Imagine you have the following snippet of HTML code... <div> <p>esrer</p> <p><span>test</span><span>ste</span>asdlfk</p> </div> Now let's compare with two different methods: First, using t ...

jquery

Guide on uploading multipart career-form data with file paths and validation in CodeIgniter with the help of AJAX

I am facing an issue while attempting to insert job form data with file uploading and validation in PHP CodeIgniter via AJAX. The code I am using is provided below, but unfortunately, it's not functioning as expected. Can anyone help me figure out how ...

javascriptphpjqueryajaxcodeigniter

Using jQuery AJAX to Transfer Data to a PHP Script

There is a div element with a data-id attribute. The goal is to use jQuery to detect when this div is clicked and then send or store the corresponding data-id value in a PHP file. However, the code provided raises an error when trying to obtain the data-id ...

phpjqueryhtmlajax

Implementing a method for JQuery event handlers to access variables within a module pattern

var MODULE = (function() { var app = { hi: "hi dad", // How can I retrieve this value? onSubmitClick: function() { $('button').click(function() { console.log(hi); // Is there a way to access ...

javascriptjquery

Issue with sidebar lazy loading: something minor is causing it to not function as expected

There's a tiny detail slipping through my fingers here... I can't seem to make lazyload work on the sidebar located on the right. Any ideas? here is where you can find it: APM v2 Your help is greatly appreciated. ...

jquerylazy-loading

Is there a way to resolve the issue of this div sticking to the top of the

I am currently working on building a portfolio website. One issue I'm facing is that my first div (for the "About Me" section) appears below my second div on the webpage. My goal is to have the first div displayed in full screen on both mobile and des ...

htmlcss

Deciphering the '$' symbol in the Cheerio API

I'm feeling a bit confused about the significance of using the $ sign in the Node.js Cheerio API. Take for instance the snippet of code below: if(!error){ var $ = cheerio.load(html); var title, release, rating; var json = { title : "", ...

javascriptjquerynode.jscheerio

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

Tips for effectively logging data retrieved through Ajax requests

When I have content loaded via Ajax with two divs and a list, my goal is to console.log which div I was typing on when clicking on a list item. However, the issue I'm facing is that I always get the first one I clicked until I refresh the page. Altho ...

javascriptjqueryajax

Removing jQuery error label from an HTML block

I need a single command that will remove an error label from my HTML when the field content is changed. It currently works on input and select elements, but not within an input-group. I am looking for a solution that will work universally across all instan ...

javascriptjqueryhtml

Using CSS with multiple background images and the "contain" property

Hey there! Is it possible to have multiple background images stacked on top of each other within a single div? I want the images to resize automatically with "background-size: contain;". Have you tried this before? background-image: url('../img/ima ...

htmlcss

Extracting a compilation of video content from a YouTube channel through JSON data retrieval

I'm struggling to display the 5 most recent videos (title, updated, thumbnail (hqDefault)) from a specific channel using JSON data. I've tried various guides but can't seem to parse it correctly. Any suggestions on how to achieve this? I&apo ...

javascriptjqueryjsonyoutubeyoutube-api

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

javascriptjquerycsshtmlcss-float

How to utilize a Jquery loop, implement a condition, and store the results in

After using dd() in PHP, the array displayed is as follows: 1 [▼0 => "1,18,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,19,20,21,22,23,24"] I need to iterate through the array and o ...

javascriptphpjqueryarrays

"Utilizing long-polling techniques for cross-subdomain AJAX requests

Currently, I am developing a notifications script that continuously checks a database for any updates and displays them in a custom JavaScript popup. I have successfully implemented the jQuery AJAX loading and processing script as well as the PHP long pol ...

phpjavascriptjqueryajaxlong-polling

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

stop automatic resizing of windows

My CSS is written using percentages. I need to maintain the percentages intact. Is there a way to stop the layout from changing when the browser window is resized? I want the percentages to remain unaffected, even when the browser window is being resized ...

javascriptjqueryhtmlcss

Ways to save an array in my database with each value occupying a single row

Is it possible for the form to be submitted with an array of checked values when a user clicks on a checkbox and saves? Each checked value should be saved in the database as a single row. I'm not sure if this is achievable, but I believe you might hav ...

phpjquerymysqllaravel

What is the best way to use a JavaScript function as a callback?

I'm struggling with understanding callbacks, especially how they function. Here is my function: function checkDuplicateIndex(values, callback) { $.ajax({ type: "POST", url: url, data: "command=checkIndexAlbumTracks& ...

javascriptjqueryajax

Leveraging the sibling combinator for altering the class of a sibling SVG element with the assistance of Material

I have created an SVG picture that I am trying to animate. Behind the elements I want to animate on mouse hover, I have added transparent rectangles. The hover effect works well on these elements as the cursor changes to pointer. However, when I attempt t ...

javascriptcssreactjssvgmaterial-ui