Adjust the size of the image to fit within the div container following

<div id="homePage"
        style="position: relative; margin: 0px; width: 320px; height: 420px;">
        <img id="userImg" src="images/5.jpg" width="100%"
            height="100%" onclick="imageClick()"
            style=" z-index: -1; margin: 0px;   "/>
</div>

<script type="text/javascript">

$(document).ready(function() {
$('#userImg').css('transform', 'rotate(90deg)');

});

</script>

After rotating the image, it no longer fits within the boundaries of the div. How can I ensure that the rotated image maintains dimensions that fit within the div?

Before Rotation:

After Rotation:

Thank you.

javascriptjqueryimagehtmlcss

Answer №1

Experiment with this technique. Determine the width and height of an image, then adjust the dimensions once it has been rotated.

let imageWidth = $('#pictureContainer').width();
let imageHeight = $('#pictureContainer').height();
console.log(imageWidth);
console.log(imageHeight);
$('#imageElement').css('transform', 'rotate(90deg)');
$('#pictureContainer').height(imageHeight);
$('#pictureContainer').width(imageWidth);

​

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

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

Enhance Vuetify pagination with personalized styles

I'm attempting to create a toolbar with pagination control aligned to the right, featuring smaller pagination control buttons. To achieve this, I took the following steps: Wrapped v-pagination in span (since v-spacer did not work without this) Adde ...

cssvuejs2vuetify.js

Having trouble figuring out how to update a list using ajax in Yii

I need to modify a JavaScript function that filters the content of a list. The current code looks like this: var id = $(this).data('id'); $.fn.yiiListView.update('contests-list', { data: {category: 2} }); I couldn't find any ...

javascriptphpjqueryyii

Guide to parsing JSONP information using Express

I am attempting to transfer data from phonegap to an express application. Below is the code I am using: Phonegap: $.ajax({ type: 'POST', url:"http://127.0.0.1:3000/test", data: {"test":"this works!"}, dataTyp ...

javascriptjsonnode.jscordovaexpress

Verification of Phone Numbers (Global)

I am attempting to create a validation check for mobile numbers, similar to the one implemented by Gmail. Check out Gmail's signup page here However, there is significant variation in phone number formats across different countries, making it challe ...

javascriptjqueryregexvalidation

Utilize the attribute selector to apply styling directly within HTML elements

My job requires me to use a CMS that does not give me access to the head-section in order to utilize attribute selectors. I attempted to address this issue by using inline styles. Here is a simplified version of my HTML code: <div> <style typ ...

htmlcss

Incorporating z-index into weekly rows within the FullCalendar interface

I'm facing an issue where my detail dropdowns on events are being cropped by the following row. Is there a solution to adjust the z-index of each week row (.fc-row) in the monthly view, arranging them in descending order? For example, setting the z-i ...

javascriptjqueryfullcalendarz-index

Populate an array of objects with various key-value pairs

In my @change method, I receive the following values: changeAttr(id, key, value) { const selections = []; }, id can be any number, key could be: color, size, sex, etc..., and value could be: red, 8, female, etc. Initially, the values might look like ...

javascriptvue.js

Converting JSON data from one structure to a different format

Could you assist me in transforming this JSON data into the desired format specified in the result section? [ { name: "FieldData[FirstName][Operator]", value: "=" } { name: "FieldData[FirstName][Value]", value: "test& ...

javascriptjqueryjson

Choosing the subsequent div after the current one using Jquery

I am currently in the process of creating a drop-down menu button that, when clicked, reveals the previously hidden div underneath it. The code is functioning properly without the use of $(this).next, but it is displaying all divs with the class .menudrop ...

javascriptjqueryhtmlcss

Can you explain how to modify the hover color of a word with select letters already colored using CSS?

Changing colors of a link before and during hover state One problem I'm facing is having a link where the first and last letters are red while the ones in between are black. This color combination should remain the same, even if the link has been vis ...

htmlcss

Show specific hyperlinks in Django depending on the user group

{% extends 'base.html' %} {% block content %} <p>Welcome to the homepage.</p> <p>{% user.groups.all() %}</p> {% endblock %} Currently, I'm exploring ways to display all the user's groups on the page. Howeve ...

htmldjangotemplates

What is the best way to implement two distinct global CSS styles for separate pages in Next.js?

I'm looking to give my website a fresh look by creating two different global CSS styles. Is it possible to use one CSS style for the old pages and another for the new pages? ...

cssreactjsnext.js

Troubleshooting Multer to fix image payload issues in a Node.js and React.js application

Currently, I am facing an issue while trying to send an image from my ReactJS frontend to my NodeJS Express backend using formData. Despite seemingly correct data transmission, the image does not appear in the payload and triggers this error from the backe ...

javascriptnode.jsreactjsexpress

How to implement a Typescript interface without necessarily implementing the parent interfaces

Within my current project, I have defined the following interfaces: interface foo { fooProperty: number; fooFunction(): void; } interface bar extends foo { barProperty: string; barFunction(): void; } Now, I am interested in creating a class like ...

javascriptclassooptypescriptextends

Exploring the power of the spread operator in event listeners within VueJS 2 and JSX

Let me simplify my issue for you: render (h) { let events = {onClick: handleClick} return (<div {...events}></div>) } The onClick event did not get added to the div element. The spread operator works well with class and style attributes b ...

javascriptvue.jsvuejs2

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

I have recently made some updates to our website's dropdown menu, expanding the results displayed. However, I would like the dropdown contents to fit within the width of our page. https://i.sstatic.net/aR0Qm.jpg https://i.sstatic.net/e61Ig.jpg I ha ...

htmljquerycss

Is it possible to supersede the pre-set validation of the html5 input types for url and email?

When using the input type url in html5, what are the default rules for a valid URL? If a custom pattern attribute is also specified along with the type, will it override the default validation rules? For example, in the line below, will the pattern attribu ...

htmlvalidation

NextJs's React-Quill is unable to effectively highlight syntax using the highlightJS library

I have been working on a NextJs application (blog) that utilizes react-quill as a rich text-editor. As part of my setup, I am making use of the Next custom 'app' feature, where my UserProvider component wraps everything to provide global access t ...

javascriptreactjsnext.jssyntax-highlightingreact-quill

Merge two Ajax calls that are triggered by different events

In my current setup, I have code in place to execute two separate ajax requests. The first one triggers on page load to display default content, while the second is activated when a user interacts with certain buttons, updating the content accordingly. I& ...

jqueryajax