CSS Show a Cropped and Resized Image - The Saga Continues

Continuing from a previous discussion on CSS Display an Image Resized and Cropped, I am in need of further assistance to enhance the existing solution provided by a fellow user...

Question: How can we dynamically resize (scale) the image based on its original size at runtime? Instead of hard-coding specific dimensions like "width: 320px; height: 221px;" in the style, I am looking for a way to relate the resizing to the actual image dimensions.

Below are some jsfiddles for reference:

http://jsfiddle.net/VdX68/ - This is based on the initial answer given in the thread. It works well if you know the image's dimensions beforehand.

http://jsfiddle.net/VdX68/4/ - In this version, the image dimensions do not need to be known, but it only works for a 100% scale. Here, I removed the width and height attributes from the .scalePan class.

http://jsfiddle.net/VdX68/2/ - This example uses percentages for width and height. The image scales according to the size of the containing div, not its original dimensions.

I am seeking a method to scale the image based on a percentage of its original dimensions, rather than a percentage of the container it resides in.

Any assistance on this matter would be greatly appreciated.

htmlcssimage

Answer №1

Although I see that you are interested in doing this, I am not entirely certain about it.

$(document).ready(function() {
    var wdth = $('img').width();
    var hght = $('img').height();

    $('img').css('width',  wdth / 100 * 90 + "px"); // adjusting width to be 90% of the image
    $('img').css('height', hght / 100 * 70 + "px"); // setting height to 70% of the image's height
});

Here is a live example: http://jsfiddle.net/VdX68/18/

You are not restricted to using JQuery for this task; regular JavaScript can also achieve the same outcome.

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

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

htmlarraysjsonangulartypescript

Flickering problems occur when using Jquery to load MVC Views upon hovering

I am trying to create a hover effect that expands and changes the content of each div when hovered over, and reverts back to its original state on mouseout. To achieve this, I am using MVC partial views: (Subpages.cshtml) <div id="subpages" c ...

jquerycssasp.net-mvcbootstrap-4

Ways to center a div with position:relative vertically on the page

What is the best way to center a position relative div vertically within its parent element? For example: <div class="parent"> <div style="position:relative;" class="child"> </div> </div> Any suggestions on how to vertic ...

csspositioncenter

The overlay lingers on the page even after the modal successfully redirects to the search

My goal is to implement a modal that prompts users to input their search term and find recipes with a specific ingredient. I have successfully achieved this by using simple redirection. However, upon redirecting to the search results, the overlay remains o ...

htmlangulartypescriptmodal-dialogbootstrap-5

The has-error class cannot be applied to certain input elements

I am currently in the process of validating some inputs within a modal: <div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="m ...

javascriptjqueryhtmlcssbootstrap-4

Trouble centering a list within a parent div using CSS

Even though this issue seems straightforward and many others have asked similar questions on the site, I find myself stuck after reading through several solutions and attempting various fixes. Why is this happening? My problem involves centering a navigat ...

htmlcssdjango

Creating a React.js NavBar: Can we refer to another component's HTML code? (Exploring the idea of a navigation bar that links to components within the same route)

My goal is to create a navbar for my personal website application that references different content sections (such as About, Skills, etc.) all on a single page route. However, I am running into some challenges. I can easily reference markup with ids/classe ...

javascripthtmlreactjs

Styling paragraph elements using CSS in JavaScript

I need help applying CSS styling to a paragraph that is being extracted using JavaScript. Here's the current code I have: var info = "<p>" + meeting.summary + "</p>; I attempted to add some styling with the following cod ...

javascripthtmlcss

Tips for creating a table that fills the height of its parent div without surpassing it

Issue: I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit. Context: When the height of the <table> surpasses that of the container, I want the ability to s ...

htmlcsshtml-table

What is the best way to toggle the readonly attribute on an input within an ng-repeat row when a button is clicked?

Here is some HTML content: <!---- HTML Content ----> <div class="container-fluid" ng-app="myApp"><br> <div class="row" ng-controller="mainController"> <div class="col-md-12"> <div class="panel pa ...

javascripthtmlangularjs

Unique CSS specifically designed for consecutive elements listed in succession

I have a list of notes in a document, but occasionally I may include some document updates (such as "Document closed", "Revision made"...). Here is the basic HTML structure of a document and its notes: <p class="document-note">My note</p> < ...

css

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

javascripthtmlcsstinymcewysiwyg

Customizing the HTMLElement class to modify particular attributes

Is there a way to modify the behavior of an HTMLElement's scrollTop property by adding some extra logic before updating the actual value? The common approach seems to be deleting the original property and using Object.defineProperty(): delete element. ...

htmltypescriptinheritancepropertiesadapter

There seems to be an issue with how Gmail is rendering HTML text

I developed a script that automatically sends HTML email messages to users. However, I've encountered an issue with the font color in Gmail. The first message displays correctly, but subsequent messages in the conversation appear in purple. This prob ...

phphtmlgmail

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

htmlangulartypescriptangular-materialangular-reactive-forms

What is the best way to extract roof representations from an aerial image using variances in RGB colors?

Currently, I am deepening my knowledge in image processing using Python and I have encountered a challenging exercise that I am struggling to solve. The task involves working with an aerial image: Aerial Image The goal is to isolate all the roofs in the ...

pythonimageimage-processingrgbimage-thresholding

Link with an embedded background image

When I click on the 'law firms' image in my project, instead of displaying a short HTML page with text as intended, it shows a '>' character. I have three circular images on my jsFiddle, and when hovered over, a background shadow ima ...

htmlcss

Replacing CSS conditional statements with jQuery

My CSS code is set to hide the #global-widget-base tag and display a tab #aside-expander when the browser width is less than 1200px. @media screen and (max-width: 1200px) { aside#global-widget-base { display: none !important; } #aside- ...

jqueryhtmlcss

There are occasions when the Phaser sprite.kill() function fails to execute

Currently, I am developing games using Phaser and have encountered an issue with the sprite.kill() method. At times, when I invoke sprite.kill(), it appears that Phaser destroys the body for collisions/overlapping, but the visual elements (image and dragg ...

javascripthtmlphaser-framework

Combining the Power of Bootstrap with Yii Framework

As a newcomer to the Yii framework, I am looking to incorporate my Bootstrap design into this platform. One issue I have encountered is related to my custom CSS. In Bootstrap, we use navbar-default for styling the navbar. I customized my navbar color by ...

phpcsstwitter-bootstrapyii