Using JQuery to adjust the image width to 100% when the height is greater than the width

Currently, I am working on developing a custom WordPress theme and here is the code snippet that I have been using:

<div class="post-thumb">
<?php echo get_the_post_thumbnail(); ?> 
</div>

I am facing an issue where I need to adjust the width and height of post thumbnails based on their dimensions. If the height is greater than the width, then set width=100% and height=auto. On the other hand, if the width is greater than the height, then set the height=100% and width=auto.

I attempted to achieve this functionality with JavaScript but unfortunately, it did not work as expected!

var landscape = $(".post-thumb img ").css('width');
var portrait = $(".post-thumb img ").css('height');

if (landscape > portrait){
$(".post-thumb img").height('100%') .width('auto');}
else {
$(".post-thumb img").width('100%') .height('auto');}

If you have any solution or suggestion on how I can resolve this issue, please feel free to share!

javascriptjqueryhtmlcsswordpress

Answer №1

What is the advantage of using jQuery compared to CSS?

.post-thumb-img {
    height:auto;
    width:auto;
    max-width:100%;
    max-height:100%;
}

The use of auto values is necessary because older versions of Firefox may not properly interpret min- declarations without explicit regular declarations.

Answer №2

One option is to designate the image as a background image and apply background-cover property

.featured-image{
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Answer №3

give this a shot

let width = $(".post-thumb img ").width();
let height = $(".post-thumb img").height();
if (width > height)
{
   $(".post-thumb img").height('100%') .width('auto');
}
else 
{
   $(".post-thumb img").width('100%') .height('auto');
}

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

What other option is there instead of using a span tag?

Take a look at this illustration. <span id="s1">Goodbye</span> <span id="s2">cruel</span> <span id="s3">world</span> <span id="s4">this</span> <span id="s5">is</span> <span id="s6">a</sp ...

htmlcss

Javascript code that enables me to specify the type of weather

My intention with this code was to create unique characteristics for different weather types and randomly select one by generating a random number. I defined 11 different weather types as objects of the Weather class. I then implemented a getWeather funct ...

javascripthtml

Paste the results of a JavaScript function into an Excel spreadsheet (codenamed "assault")

I currently have a website that utilizes a JavaScript function to validate a text input with 5 characters. The HTML code for this functionality is as follows: <p class="form-control-static ret"> Input your Text: <input ty ...

javascriptexceldictionary

Customizing the placeholder font size in Material UI Autocomplete using ReactJS

Is there a way to change the placeholder font size for Material UI Autocomplete? https://i.stack.imgur.com/x71k2.png <Autocomplete multiple id="tags-outlined" options={top100F ...

javascriptreactjsmaterial-uimaterial-table

My browser isn't triggering the jQuery change event, although it does work in jsfiddle

Whenever a textbox is changed, I want a specific function to be executed automatically. The code snippet below demonstrates my approach: var div = document.getElementById("tree"); var input = document.createElement('input'); input.id = 123; i ...

javascriptjquery

Personalized design for Sweet alert 2

I am trying to customize a sweetAlert2 by defining a className, but it seems that the styling is not applying to the sweet alert. I have tried calling the class name "styleTitle" and various other names, but nothing seems to work. Could the issue be with t ...

javascriptcssvue.jssweetalert2nuxt.js

Transforming into a serialized division

I am working on creating a custom WISYWIG editor that generates a div with specific inner elements. The goal is to design the div (along with its inner structure), serialize it, store it in a database as a string or JSON format, and later insert it into th ...

javascripthtml

What is the reason for JSON.parse throwing errors on the same strings that eval does not?

Imagine having something like this: var a = '["\t"]' When you use: eval('var result = ' + a) Everything runs smoothly. However, if you try: var result = JSON.parse(a) You'll encounter an error: Unexpected token. The s ...

javascriptjsoneval

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

htmlcss

Finding an element's id within a click event inside an iframe

<iframe id="myiframe" src="doc.html"> <button id="btn1"></button><!-- how do I retrieve this id? --> </iframe> $('#myiframe').on('click', function () { alert(this.id); }); I am trying to make it ...

javascriptjqueryhtml

Discover the capability to choose dates from different months using the DatePicker component from @material-ui/pickers

I am currently in the midst of a React project that requires the use of the DatePicker component from @material-ui/pickers. The specific mandate is to show dates outside of the current month and allow users to select those days without needing to switch m ...

javascriptreactjsdatepickermaterial-ui

reverse the effects of a jQuery animation

In my animation project, I implemented a feature where 4 divs slide "behind" another div. However, I now require a reset button that will display all the divs again. My initial approach was to undo the animation by simply reversing it. For example, if I an ...

jqueryjquery-animatez-index

Using the <audio> tag in HTML5 on Android devices

Exploring discussions on Android's support for the <audio> tag has been enlightening. Despite attempts on a Nexus One running Android Froyo 2.2, it seems playing audio remains elusive. As indicated by www.html5test.com, while the tag is support ...

androidhtmlgoogle-chromeaudio

The challenges of updating AngularJS partial templates and handling refresh in 2-way binding

I've encountered an issue with a partial template that's loaded outside of my ng-view, complete with its own controller. Here's a breakdown. Basic template layout <html ng-app="myApp"> ... <div ng-include src="'myPartia ...

javascriptangularjsngroute

How can we create a flexible item that can be resized along with another item set to a fixed length?

Is there a way to create an element with a fixed height and width of 40px, while having another element next to it that takes up the remaining space of the parent element's width? I want the second element to shrink when resizing, while the first one ...

htmlcssresponsive-designflexbox

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

javascriptphphtmljqueryjquery-events

Searching for a four-digit number within a string using NodeJS Regex, alongside specific keywords

I have a regex pattern that should match strings with a specific year format. The template is 'Year--"high OR low"-level'. Here is the regex I've created: /Year-\d{4}-\b(low|high)\b-level/gi; When I test it using online regex ...

javascriptnode.jsregex

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

javascripthtml

Node.js Monitoring Statistics Displayed in Command Line Interface

Apologies if this question has been asked before. I have been looking for something similar to what I need, but haven't been able to find it anywhere. So, I thought I'd ask. I am working with a nodejs script using puppeteer and I want to view st ...

javascriptnode.jscmder