Setting the height to 100% will not maintain the aspect ratio of the image

Having trouble with Blogger once again as I try to style the homepage. I am aiming to feature snippets and titles in tiles with a fixed height of 200px but a dynamic width for responsive design.

My goal is to display the first image and a "read more" button on hover. Due to restrictions, I cannot use the background URL function, so I need to find a solution using the image tag.

Although my fallback background solution works well with background-size contain, I am striving to achieve a similar look to background-size cover with the preview image.

I have attempted to use the CSS code snippet:

img{
  height: 100%
  min-width: 100%; 
}

However, this approach did not yield the desired result. The entire area is covered, but the image is stretched and does not maintain the correct aspect ratio.

I am hopeful that someone can provide a solution to make this work. Ideally, a CSS-only solution would be best, but I am open to using JavaScript if necessary.

For reference, here is a link to my test blog:

jqueryhtmlcssimageblogger

Answer №1

When you set the following CSS properties:

img {
    height: 100%;
    min-width: 100%;
}

You are essentially instructing the image to always take up at least 100% of its container's width and height.

Consider using these alternatives for more control:

/* 100% width with proportional height */
img {
    width: 100%;
    height: auto;
}

/* 100% height with proportional width */
img {
    width: auto;
    height: 100%;
}

/* Maximum 100% of original width with proportional height, image can resize down but not exceed original size */
img {
    max-width: 100%;
    height: auto;
};

Answer №2

Here's how I adjusted the picture to the correct aspect ratio. Do you think it looks good?

I'm not entirely sure what your goal is...

Check out the CSS code I used:

height: 300px !important;
min-width: initial !important;
overflow: hidden;

Edit: I believe the most effective method is to create all images in Photoshop and set them to predetermined dimensions in a known area.

Answer №3

Start by removing the following: min-width: 100% !important;. It's generally best to avoid using !important rules in your CSS.

If you want to maintain the image's aspect ratio, make sure the width is set to auto and not being overridden by min-width. Here's how you can adjust your CSS to achieve this.

Additionally, consider cleaning up your CSS code or starting from scratch, as it appears that the same rules are repeated on multiple lines, which can lead to confusion.

EDIT

For a more challenging solution, you can add the following rules to your image:

width: auto; // maintains aspect ratio
max-width: initial !important; // overrides default Blogger rules
height: 100%; // vertically stretches the image within its parent element

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 is the best method for sorting comments by ID using jQuery?

I am embarking on a new project to create a filter for comments so that they are displayed with the corresponding post ID. Your help is greatly appreciated! $(function () { $.ajax({ type: "GET", url: "https://jsonpla ...

jqueryloopsfilterforeachcomments

Utilizing JQuery to Invoke a WebMethod with Parameters in C#

I have an HTML hyperlink that I want to trigger in jQuery when it is clicked. <a href="#" data-toggle="dropdown" id="notID" class="dropdown-toggle f-s-14"> <i class="fa fa-bell"></i> <span runat=" ...

c#jquerywebmethod

Imposing the situation

In my current class, I have a private property and a public method for access: Person = function () { this.Name = "asd"; var _public = new Object(); _public.Name = function (value) { if (value == undefined) { //Get return ...

javascriptjqueryscopethis

Position the personalized radio button to be in line with the first choice text

I frequently update this section with a new Jsfidle link to demonstrate the issue when the max-width is set to 300px. For responsive design, adding the "span" tag before radio buttons helps align input content with custom checkbox backgrounds. To see the ...

htmlcss

Adding a backslash in Angular: Tips and Tricks

I have a question about adding a backslash to a string that is returned from a div, for example Car1 \sold. Although I am able to retrieve the status, I am having trouble adding the backslash. Here is what I have tried so far: <span>{{addBackl ...

javascriptangularjshtmlangulartypescript

Ways to eliminate or conceal solely the play/pause symbol or button from the media player within the video tag

[Please see the screenshot attached, I am looking to remove the play/pause icon that is highlighted] [screenshot] How can I hide or remove only the play/pause button from the media player of a video tag? When I dynamically add the controls attribute using ...

javascriptjqueryhtmlcss

Shorten the text in a flex container using ellipsis and flex-grow

I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time. .parent { display: flex; border: 1px solid black; gap: 10px; } .first-column { bor ...

htmlcssflexboxellipsis

Is there a way to initiate multiple AJAX requests once a single request has been completed successfully?

I have created two functions and I want to call the get_name_from_id function when my first ajax function is successful. However, it is not working as expected. When I add an alert in the get_name_from_id function after the jsonString variable like alert ...

javascriptphpjqueryajax

retrieving the element's height results in a value of 'undefined'

I am attempting to get the height of a specific element, but unfortunately I keep getting undefined. Here is what I have tried: var dl; $(window).load(function(){ dl = $("#dashboard_left").height(); }); $(document).ready(function(){ alert(dl); } ...

javascriptjquery

if the condition is not met, proceed to the alternate template eventually

Hey there, I'm facing an issue with my code that resembles something like this: <ng-container *ngIf="firstCondition; else Farewell"> <ng-container *ngIf="innerContainer"> <div class="Hello Message"> {{HelloMessa ...

htmlangular

Dividing the screen into multiple sections to display cards

I have a question about integrating product cards into a split screen layout. Despite my efforts, the cards are stacking on top of each other instead of appearing side-by-side. Does anyone have a solution or suggestion? Below is the code I have been work ...

cssbootstrap-4grid

How to activate a media query in response to user interaction using JavaScript

My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...

javascriptcssresponsive-designmedia-queries

Creating a layout with three rectangular shapes using HTML and CSS

What is the most effective method to achieve the following layout using HTML/CSS: +---------+---------------------------------------------------+ | my | Home About Categories Donate | | best +---------------------------------- ...

htmlcsspositioning

The functionality of Angular.js route seems to be malfunctioning

Hello friends, I am fairly new to working with AngularJS and have been experimenting with angular Route. However, I encountered an issue where clicking on #/home resulted in a strange URL appearing here. Oddly enough, the default otherwise condition seems ...

javascripthtmlcssangularjsngroute

Cells within a table are equivalent

I am attempting to ensure that all table cells match the size of the image, but for some reason, they are not aligning properly. Visit this link for reference. Here is a condensed version of the HTML code: <table> <tr> <td> ...

htmlcss

Enhance text content effortlessly with an automated text augmentation feature

Essentially, what I'm wondering is whether there exists a program that can automatically add HTML tags to the text you input. For instance: Let's say I type in: "The world is beautiful" The program would then transform it into: <p align="c ...

htmlcsstext

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

javascripthtmlxml-namespaces

How can I eliminate the need for 'library-preload.json' in my SAPUI5 application?

I am currently in the process of developing a SAPUI5 mobile application using cordova. The next step is to integrate another library, specifically cordova-plugin-file, into my project. However, I have encountered an issue where including this plugin causes ...

javascriptjqueryjsoncordovasapui5

Maintaining the proportions of images in different screen sizes when resizing

I apologize if this question has already been addressed, but I have been unable to find a solution that works for my specific issue. My Gallery consists of a side list of available images in one section, which when clicked changes the image source in anot ...

javascripthtmlcss

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

javascriptjqueryhtmlcsstwitter-bootstrap