Struggling to make images equal in size on my webpage [HTML/CSS]

When comparing two images, both 512px in height and width, the plus symbol appears larger than the shutdown button.

HTML:

<div class="logout">
    <a href="someLink"> 
      <img name="logout" alt="logout" src="red_shutdown.png">
    </a>
  </div>

  <div class="plus-symbol">
    <img name="plus" alt="create-post" src="plus-symbol.png">
  </div>

CSS:

div.logout {
  position: fixed;
  bottom: 10%;
  right: 1.32%;
  border: 0;
}
div.plus-symbol {

  position: fixed;
  bottom: 10%;
  right: 1.32%;
  border: 0;
}

Answer №1

In order to resize an image to 512x512, simply set the parent tag dimensions to be width:100%; height:100%;

Verify in the inspect tool if the images are overflowing. If they are, add overflow:hidden

Answer №2

If this variation doesn't perform as desired, please inform me.

<style>
   img {
      width: 512px !important;
      height: 512px !important;
   }
</style>

You can also assign a class to the element

Just like this:

<div class="logout">
   <a href="someLink"> 
      <img name="logout" class="img_icon" alt="logout" src="red_shutdown.png">
   </a>
</div>

<div class="plus-symbol">
   <img name="plus" class="img_icon" alt="create-post" src="plus-symbol.png">
</div>

<style>
   .img_icon {
      width: 512px !important;
      height: 512px !important;
   }
</style>

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

Learn a simple method of integrating carousels into text elements within a grid using exclusively Bootstrap 5

I need to incorporate a carousel into this section of my code using only Bootstrap 5. However, the current implementation is not functioning as expected (the items are stationary): This is the relevant HTML snippet: <div class="container px-4" ...

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

Is it possible to incorporate variables within literal CSS in Stylus?

My Stylus function has the following structure: // Convenient way to create a top-down gradient background color td_gradient(color1, color2) background-color (color1 + (color2 - color1) / 2) background -webkit-gradient(linear, 0% 0%, 0% 100%, from ...

How to customize nouislider appearance using Bootstrap styles

I've been attempting to style the noUi tooltips to match the bootstrap design, but I've been unsuccessful so far. I'm wondering if there's an easy way to achieve this. I tried to structure the markup based on the bootstrap template ava ...

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

Setting both the height and row height of the table is not allowed

Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows: $(document).ready(function() { var table = $('#example').DataTable ({ iDisplayLength: 15, "bLen ...

Reasons for aligning inline elements with input boxes

I am facing a challenge with aligning a series of inline elements, each containing an input text box, within a single row. The number and labels of these input boxes can vary as they are dynamically loaded via AJAX. The width of the div housing these inli ...

Ways to showcase the chosen choices from earlier stages in the intelligent guide

Currently, I am developing a user interface for my latest project and have incorporated the Smart Wizard from . In particular, I am utilizing the smartwizard-modal.html found in the examples section of smartwizard. This specific smart wizard modal consis ...

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

Experience mind-bending timing functions in CSS animations with IE11

Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

The situation: On my simple HTML website, I have a group of images placed side by side. Each image is connected to a specific article, and when you hover over the image, a detailed description of the linked article pops up in the center of the page. The o ...

Is there an easy method to compare the CSS styles of a specific section in HTML?

Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...

"Utilizing images within an iframe: A step-by-step guide

I'm trying to integrate an iframe into a phone image with a transparent background. However, I am unsure how to effectively mask the iframe so that it only appears within the boundaries of the phone image. .phone { display: block; position: r ...

`CSS Toggle Smooth Transition Effect`

I am working on creating 2 CSS toggle buttons that currently have a fade in and out effect when clicked. I would like them to have a sliding animation from right to left instead. Below is the HTML, CSS, and a link to a fiddle containing my code. Thank yo ...

What is the best way to create a reset button for a timing device?

Is there a way to reset the timer when a button is clicked? Having a reset button would allow users to revisit the timer multiple times without it displaying the combined time from previous uses. Check out this code snippet for one of the timers along wit ...

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

Text alignment from the lower edge

Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows toward ...

Passing variables in Redirect() without exposing them in the URL; a methodical approach

After scouring the depths of the internet, I have been on a quest to figure out how to seamlessly redirect to a new page on my site while discreetly passing a variable without exposing it in the URL like so: www.test.com/?variable=dont.want.this.here I a ...