Utilizing CSS to manipulate the size of an image within an HTML tag by combining two separate

I'm currently working on a responsive website where I am trying to resize images using the CSS property transform:scale. It's important to me to maintain the aspect ratio of the images, so I have created two separate classes - one for landscape images and one for portrait images.

Here is the HTML code:

<img class="landscape" src="" width=100%; height=100%> 
 <img class="portrait" src="" width=100%; height=100%>

And here is my corresponding CSS:

img.landscape { transform:scale(0.745,0.671);}
img.portrait { transform:scale(0.671,0.745);}

The landscape images are being scaled correctly, but I am encountering issues with the portrait images not being scaled properly.

Can someone please help me identify where I may be making a mistake? Additionally, I would like to create a third class specifically for square-format pictures.

Thank you in advance for your assistance.

-Cevin

htmlcss

Answer №1

The issue arises when you specify width and height that are based on the display dimensions. If you remove these specifications, you will notice a difference in the outcome

img.quer {
    transform:scaleX(0.745) scaleY(0.671);
}

img.hoch {
    transform:scaleX(0.671) scaleY(0.745);
}

<img class="quer" src="https://www.w3schools.com/css/trolltunga.jpg" >   
<img class="hoch" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSobAPMeqgsRtHrX8vclVHPggkhqcSt0q1ixhyokNq3Wa16TGF6Mp34Cjo" >

https://jsfiddle.net/dqypm8yh/

Given that the screen's width is larger than its height (on a monitor), images of landscapes will scale more effectively.

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

The table header does not stay in place or remain fixed

My issue lies in using bootstrap, HTML, and CSS. As I scroll, the table header does not move along with the data. I've attempted implementing sticky-top and position-relative without any success. <div class="tab-div"><table class="table tab ...

htmlcssbootstrap-4

Switching image when hovering with mouse using javascript

I am working on an HTML webpage and trying to make an image change when hovering over a div, but it doesn't seem to be working. Any suggestions? <!doctype html> <html> <head> <meta charset ="UTF-8"/> &l ...

javascripthtmlonmouseover

What is the best way to adjust the row and column layout in bootstrap?

As I was creating a layout to showcase all of the bootstrap cards in a neat and organized manner, I noticed a peculiar issue that's been bothering me. Everything looks great when the columns are filled or when there's only one card present. Howev ...

htmlcssbootstrap-4layoutbootstrap-5

What is the best way to preserve text input value when going back a page in PHP?

Is there a way to keep the text box value entered by the user even after navigating away from the page? Below is an example of what I am trying to achieve in my code: **main.php** <html> <head></head> <body> <i ...

javascriptphphtml

What specific CSS code do I need to incorporate in order to style a chat application?

I'm currently working on styling a simple chat application, nothing too extravagant, but I'm encountering a few obstacles. My styling goals include: Aligning blue messages (from you) to the right and gray messages (from other users) to the left. ...

javascripthtmlcsscss-grid

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

TypeError: 'array' type does not contain the method 'fetch_attribute'

I've encountered an issue with a piece of code that I'm working on and I'm trying to retrieve a link from an element identified as "statistic_info_link". However, when I attempt to do so, I receive the following error message: AttributeErr ...

pythonhtmlseleniumweb-scraping

Alignment issue with content within bootstrap grid

.course-card{ background: white; border-radius: 0.25rem; padding: 1rem 1rem 1rem 1rem; text-align: center; } <div class="row d-flex align-items-center course-card"> <div class="col-md-6 course-progress"> <p>test</p> ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with footer not staying at the bottom persists despite changes in resolution

Trying to figure out how to make sure my footer stays at the bottom of the page even when resolution changes. I've attempted changing its position from fixed to relative, but it's not behaving as expected. <!DOCTYPE html> <html lang=&quo ...

htmlcss

Checkbox validation malfunctioning

I'm currently working on a attendance management project and one of the forms includes multiple checkboxes. I want to ensure that at least one checkbox is checked before the form can be submitted. I attempted to use Javascript for this, however, the i ...

javascriptphpcsshtml

Text below div will be displayed

When hovering over a div, an identical one will appear next to it with more information. Unfortunately, the content appears under the div but retains the styling like border-radius and background color. This is how my HTML looks: The div that needs ...

jqueryhtmlcss

Keep the color of the clicked link consistent

I've been experimenting with keeping the color of a link when clicked, not just while the mouse is over it (so that if the mouse moves away from the link, the color will stay). For example, on this website, when you click on "Ask a question," the col ...

javascripthtmlcssasp.net

Aligning pictures in a vertical arrangement across various rows

Is it possible to style a bunch of images in CSS without defining anything in HTML, so that they appear in multiple rows aligned vertically with each row containing 5 or 6 images? The current code using .wrapper displays the images endlessly in one row. C ...

htmlcssflexboxvertical-alignment

Highlight a fractured line in HTML caused by word-breaks

Is there a way to visually indicate when a line is broken in HTML code displayed with code or pre elements using an icon, similar to how it's done in VS2019 (shown in the screenshot)? I believe this can be achieved through CSS styling, but I'm lo ...

htmlcssword-break

Dealing with checked input type='checkbox' in React - A guide

Having a set of checkboxes, some already checked and some to be updated by the user. The issue here is that while the checkboxes render correctly initially, they do not change upon clicking. The 'checked' value does get updated when onChange is t ...

javascripthtmlreactjs

Utilize the Bootstrap responsive grid system to ensure that every row is filled with content, creating

I am working with a list of 8 results that I display in a responsive bootstrap grid. However, I want to only show the results that fill up entire rows. For instance, on a medium-sized screen, it appears as 2 rows with 4 results each. On a smaller screen, ...

javascripthtmlcssbootstrap-5

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

htmlcsswidth

Displaying various values from a cascading dropdown in Django

Currently working with Python 3.8 & Django 3.0, I am in need of passing multiple values (volume & volume size) to a dependent dropdown. While I have managed to fill the dependent dropdown with a single value (volume), I have come across some resour ...

htmlpython-3.xdjangoajax

Creating a form within a PHP script

After creating a form within a PHP file and using the post method to send a value to the next page, I encountered an issue where the variable was not being successfully passed on. What could be causing this problem? When looking at the code snippet provid ...

phphtmlformssessionpost

Angular: Discovering and retrieving all images within a div container

I am on a quest to locate all image tags within a specific div. These image tags are nested within paragraph tags inside the div. I attempted to create a plunkr to accomplish this task, but unfortunately, I haven't had any success yet. If anyone is ab ...

javascriptjqueryhtmlangularjs