Pictures appearing stretched due to width or height percentages being used

I'm dealing with a set of 15 consecutively displayed images, each following the same format:

<div class="foo">
    <p>
       <a href=""><img src="img.jpg"></a>
    </p>
    <p>
       <a href=""><img src="img.jpg"></a>
    </p>        
    ...
</div>

Here is the CSS applied to these images:

.foo img {
   height: 75%;
   width: 75%;
}

All browsers I've tested have displayed the images correctly, except for an older Macbook OSx version (10.5.8) where both Chrome and Safari show the images stretched out.

I am attempting to resize each image to be 75% smaller than its original size. However, since the sizes vary, resizing each manually seems inefficient.

Is there a way to resolve this issue without individually resizing every image?

css

Answer №1

Discovered the solution:

To ensure the image maintains its aspect ratio, use only width:100%; and remove height: 100%;. This will instruct the browser to resize the image while respecting 100% of the width, essentially fixing the width and stretching the height proportionally.

Appreciate the assistance!

Answer №2

Could you give this a shot?

.bar img {
   max-height: 200px;
   max-width: 200px;
 }

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 are some ways to enable text highlighting when it is disabled?

I've encountered an issue with text highlighting in my asp.net web application when using the latest versions of FireFox and Google Chrome. Strangely, pressing CTRL+A also does not work for all input fields. I haven't had the opportunity to test ...

csscross-browserhighlighttextselection

Ways to update font color using bootstrap-cue

Looking for a button with white text on a dark-blue background Find the code in xxx.vue <b-dropdown text="user" right variant="blue" class="signout-button"> <b-dropdown-item @click="toMain()">sign out</b-dropdown-item> </b-dro ...

cssvue.jsbootstrap-4

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascriptcssangularevents

Is it possible to have content boxes that fly in when a button is clicked

I am exploring the idea of creating two dynamic boxes that appear when a button is clicked, much like the effect seen when "About Me" is selected on . After struggling to decipher how it was achieved, I opted for utilizing modals. However, I encountered d ...

javascripthtmlcsssvgmodal-dialog

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

csssvg

What are the methods to ascertain whether an HTML element possesses a pseudo element?

Is there a method to identify whether an HTML element has a pseudo element (::before / ::after) applied to it without invoking the function: window.getComputedStyle(element, ":before/:after"); MODIFIED: the response is NEGATIVE The issue with getCompute ...

javascripthtmlcsspseudo-element

Displaying values in form fields when a specific class is present

Whenever I input and submit the form fields correctly using #submit_btn, my values disappear. However, when they are not valid, this issue does not occur. I attempted to address this problem with jQuery: $('#submit_btn').click(function() { i ...

javascriptjqueryhtmlcsswordpress

Hide when reaching the end with d-none

One of the challenges I'm facing is aligning a button to the right side of a column while still utilizing d-none to control its display. Previously, I used d-flex justify-content-md-around justify-content-lg-end for alignment before adding d-none, but ...

csstwitter-bootstrapbootstrap-5

Issues with Highchart resizing within an AngularJS environment

Incorporating Highcharts into my angularjs app to display statistics has been successful. The graph appears correctly upon page load. However, when I adjust the orientation, the appearance changes and then switching back from landscape to portrait result ...

cssangularjshighcharts

Concealed visual revealed through Javascript within a selected textbox

Is there a way to change the visibility of an image inside a textbox? I would like the placeholder text to become invisible when I select the "search" textbox. Can we achieve the same effect with a picture inside the textbox? Here is the code: <div id ...

javascriptjqueryhtmlcss

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

htmlcssiframeposition

I need to see the image named tree.png

Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...

javascriptjquerycsshtml

Having an issue with Local Storage returning undefined

I've been working on a form to input values and show the data on a different page after submission. Below is my form: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hr ...

javascripthtmlcss

Dynamic emblem on a webpage

Recently, I stumbled upon this website. A unique feature caught my attention - when users click on the "Log in" button, the logo on the page starts animating. I'm intrigued by this animation and curious to learn how it can be implemented. Can anyone p ...

htmlcss

Tips for creating a sticky footer in an ASP.NET webpage

In my asp.net project, I have a master page that includes other pages' content via ContentPlaceHolder. I am trying to implement a footer on the master page that stays at the bottom using CSS, regardless of the content displayed in the pages utilizing ...

cssasp.netmaster-pagessticky-footer

Creating a CSS navigation sub menu

I am having trouble with my CSS code regarding the sub navigation menu. It seems to close as soon as I try to select an option. I suspect that there might be something wrong with the last CSS style. Currently, it only shows when you hover over it but disap ...

htmlcss

Attempting to enhance my show/hide DIV code to efficiently target multiple divs

Currently, I am faced with a challenge involving a lengthy case study that includes numerous images. The loading time for the page is exceptionally long due to the high number of images. To address this issue, I have implemented a method using show and hid ...

htmljquerycss

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

javascriptcssangularjs

Remove Vue Component from the styling of current application

We integrated a Vue component (using Vuetify) into our existing .NET MVC application. The issue we are facing is that the Vue component is inheriting all the CSS styles from the rest of the application. Here's a simplified version of the HTML structur ...

javascripthtmlcssvue.jsless

The results in the grid are displayed in a horizontal layout, rather than a

My grid results are not rendering as desired, appearing horizontally instead of in two columns. Attached is my current CSS and a screenshot of the issue for reference. Any suggestions on how I can achieve the layout shown in the screenshot below? .grid ...

htmlcss