Align an image to the right with specified maximum width and height restrictions

I need help with aligning an image to the right while maintaining its max-width and max-height. The issue is that when the width is adjusted, the image moves to the left side instead of staying on the right edge. How can I prevent this and keep the image aligned to the right edge even when the width changes?

    <div class="img-label-wrapper">
      <img src="../assets/portal/css/x-logo.png" class="titleResource" width="60px" height="20px">                    
    </div>

    .img-label-wrapper {
       position: relative;
       top: -5px;
       text-align: right;
       width: 100%;
    }    
    .img-label-wrapper .titleResource {
       max-width: 100px !important;
       max-height: 20px !important;
       float: right;
       margin-top: unset !important;
    }
jqueryhtmlcssright-align

Answer №1

To align the image to the right, you can simply use a combination of flex and margin-left: auto. Avoid specifying the dimensions of the image in the img tag.

.img-label-wrapper {
  display: flex;
}

.titleResource {
    max-width: 100px;
    max-height: 20px;
    margin-left: auto;
}
<div class="img-label-wrapper">
  <img class="titleResource" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">                   
</div>

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

Guide to reaching Notebooks and Desktops with Bootstrap 4:

When working on websites, I often find myself having to adjust the CSS for two common screen resolutions - 1366x768 and 1920x1080. Even though Bootstrap's largest grid is 1200px wide, there are instances where customization is needed. What is the bes ...

cssresponsive-designbootstrap-4

Execute function upon successful Ajax call

I am currently working on a project where we are retrieving information from an XML file. Everything is functioning well, but I now need to create a slider to display this content. My plan is to utilize jCarousel, as they claim to support dynamically loade ...

jqueryxmlajaxjcarousel

Newbie problem with MVC Razor: struggling to upload file via Ajax

I am experiencing an issue with my AJAX file upload using C#-Razor. For some reason, when I click the button to submit the file, the controller method is not being triggered. Can anyone provide a solution to this problem? Here is the code snippet: View ...

javascriptjqueryajaxasp.net-mvcasp.net-ajax

Increasing the size of a div container based on the position of the cursor on the

I recently stumbled upon a fantastic website where two images slide left and right based on mouse movement. When the cursor is on the right, the right part of the image expands, and when it's on the left, the left part expands. You can check out the ...

javascriptjqueryhtmlcss

How to create a gelatin-like effect on a rectangle using HTML5 canvas

Currently, I'm working on a platformer game project in JavaScript. The concept involves players as rectangles jumping on and off platforms. While the basic functionality is set up, I'm now aiming to incorporate a unique 'gelatine effect&apos ...

javascriptcsshtmlcanvasrectangles

Keys that are able to change dynamically

I am attempting to generate a dynamic object with dynamic keys like so: var test = "test"; var obj = { test:"bananas" } However, I am encountering an error: Uncaught SyntaxError: Unexpected token + Is this prohibited? Is there any way to accomplish t ...

javascriptjqueryobject

I am having an issue where my div element is not inheriting the width of its

I am encountering an issue where I have one div and I check the width of that div in jQuery. I then try to set the same width on the next div, but the width does not appear. Can someone please assist me with this? Here is my code: $(document).ready(funct ...

javascriptjquery

Implementing Jquery Ajax in the CodeIgniter framework

Recently, I have been encountering some issues while attempting to utilize jQuery ajax in Codeigniter. Despite having successfully implemented jQuery ajax in previous projects, my current code seems to be causing complications. Below is the snippet that I ...

phpjqueryajaxcodeigniter

What is the best way to retrieve a value from an INPUT field and dynamically assign it to a jQuery variable?

Hey everyone! I've got a POST form with a field like this: <input type="text" name="username" /> Using jQuery, I have declared a variable called var username = <---insert code here--->; Here's the question: How can I dynamically as ...

javascriptjqueryhtmlforms

Is there a way to stop window.pageYOffset from resetting every time the page is rendered?

I've been working on a react component that changes the header based on the scroll event. By attaching an event handler and toggling a display class to show or hide certain elements depending on the scroll position. However, I've encountered som ...

javascriptcssreactjs

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

htmlcssasp.nettelerik

Build a dynamic table by leveraging JSON with the power of JavaScript and HTML

I'm currently working on creating a table where information is stored and updated (not appended) in a JSON file using JavaScript and HTML. The structure of my JSON data looks like this: [{ "A": { "name": "MAK", "height": 170, ...

javascripthtmljson

Tips for altering the background of a video on Vonage

Hello everyone, Currently, I am incorporating the Vonage API for video calling into my project. I would like to tweak the video background - does anyone have any ideas on how to accomplish this? I eagerly await your responses! Thank you in advance! ...

javascriptcssvonage

Interact with PHP by utilizing Jquery to update or remove data using the PUT

I'm running into an issue while trying to utilize Jquery.ajax() with PUT and DELETE methods. I am sending data with the request, but on the PHP side, when I print the request, it shows up empty. $.ajax({ url: 'ajax.php', type: 'DELETE& ...

phprestjquery

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

javascriptjqueryhtmlcss

Adjust the color of additional SVG paths upon hovering

I have the following code snippet. .icon {stroke-width: 0; stroke: currentColor; fill: currentColor;} a {color: red} a:hover {color: pink} a:hover circle {fill: green !important; color: orange} a:hover path {fill: blue !important} <a href=""> ...

htmlcsssvg

Adding data to input fields with PHP

After retrieving values from an HTML form using a post method, I proceed to store them in my database using the MySQL INSERT command within a PHP script. Here is an example: $value = $_POST['name']; $value1 = $_POST['age']; $sql = "IN ...

phphtml

How can I ensure that the images span the entire width of the page in ResponsiveSlides?

I am trying to make my images occupy the entire width of the page just like in this example: However, I have not been able to find a property for this. I'm new to using Jquery but I have a good understanding of Javascript Can someone please help me ...

javascriptjqueryhtmlcssresponsive-slides

What is the method for adding data to a table without utilizing an ID field?

Here is the code I have written: This table contains details of the candidates: <table id="candidates-table" class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Candidate Picture ...

javascripthtml

Unable to specify the content-type as 'application/json' using jQuery.ajax

When I use the following code $.ajax({ type: 'POST', //contentType: "application/json", url: 'http://localhost:16329/Hello', data: { name: 'norm' }, dataType: 'json' }); In Fiddler, I can see th ...

jsonjquerycontent-typewcf-rest