Stretching of images in Safari and Chrome

Having trouble with image display on different browsers?

Look at my code snippet below:

   <style>  
    #globalpsa {
    width:100%;
    height:100%;
    border:3px double #fff;
    margin:2% auto;
    }
   #globalpsa input[type="image"] {
    width:100%;
    height:100%;
    }
    </style>

    <div id="globalpsa">
    <a> 
     <input type="image" src="/images/advert_images/ban2.jpg" alt="globalpsa"    
     name="globalpsa"/>          
     </a>
     </div>

Experiencing image stretching on Safari and Chrome browsers? Let's discuss the solution!

Answer №1

To experience the image in its true form, eliminate the height property. Images are naturally adjusted proportionally.

<style>  
 #globalpsa {
  width:100%;
  /* height:100%; this line should be removed */
  border:3px double #fff;
  margin:2% auto;
 }
 #globalpsa input[type="image"] {
  width:100%;
  /* height:100%; this line should be removed */
 }
</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

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

How can we create lists using parentheses specifically with Javascript or jQuery?

I am looking to create a formatted list using <ol> and <ul> tags with parentheses included. (1) List1 (2) List2 (3) List3 (4) List4 The challenge is to achieve this formatting purely with javascript or jQuery, without relying on any external ...

Unable to transfer HTML code into the TinyMCE editor

I've successfully stored raw HTML content in my database, and now I want to display it in my TinyMCE editor for users to easily edit and submit. Below is the form: <textarea id="postfullOnEditPop" type="text" class="validate" placeholder="Enter f ...

Can anyone lend a hand with styling this menu without relying on margins in CSS?

I've been working on a website and I've noticed a significant lag in Internet Explorer when hovering over the menus. It appears that Cufon is contributing to this issue, especially when applying height, width, margins, or paddings to the li:hover ...

Bits of code and the internet

When it comes to displaying code on the web, there are a few key steps involved: Encoding HTML entities Formatting The most basic workflow would involve: Start with a code snippet like: <html> I'm a full page html snippet <html>. ...

Attempting to upload a file into the system

I'm in the process of creating a website that allows for file uploading. Check out my code below: index.php: <?php include('/inc/header.php'); ?> <?php if($_SESSION['username'] != null) { echo " <form class=&bs ...

Display the tooltip only when the checkbox is disabled in AngularJS

My current setup includes a checkbox that is disabled based on a scope variable in Angular. If the scope variable is true, the checkbox stays disabled. However, if the scope variable is false, the checkbox becomes enabled. I am looking to implement a too ...

Out of reach: Menu div slides up on click outside

<a class="btn">Click ME </a> <div class="content"> Content </div> $('.btn').click(function(){ $('.content').slideToggle(); }); Check out the example here Everything is working properly, but I have a q ...

How can I show the last li item in a ul element that extends beyond its parent container?

Chat App Development In my current project, I am developing a chat application using React. The app consists of a list (ul element) that displays messages through individual items (li elements). However, I have encountered an issue where the ul element st ...

Why won't the div move when I click it?

Could you please explain why my JavaScript code isn't functioning as expected? The intended behavior is for the 'mark' div to move to the current mouse coordinates upon clicking within the map. ...

What is the method for specifying input type in an HTML document?

I need assistance with controlling an input field labeled "Size" in HTML. The input should only allow users to enter Numbers and specific characters like X, ', and ". Other alphabets and characters should be restricted. I am working with AngularJS as ...

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

Customizing content based on Route - Utilizing Node.js/React

I am currently working on setting up routes for different pages of store profiles in my Node app. I have been doing some research online and have come to understand how to adjust the parameters, but I am struggling with figuring out how to dynamically chan ...

What is the best way to align text with my CSS number and circle on the same line?

Here are two questions for you: First off, I've successfully created a circle with a number inside it using CSS. How can I go about filling the circle with color? Secondly, I'd like to know how I can align the words "Opportunity #1" on the same ...

unable to retrieve parent ID

I am having trouble retrieving the ID of the parent's parent of the event target. It keeps coming back as undefined, but I have verified through firebug that the ID does exist. Below is my HTML markup: <div class="grid-stack-item ui-draggable ui- ...

Using the power of HTML5, store data locally on

I am curious about the possibility of using local storage on a different page. I want to track clicks made on one page and display it on another, but I'm not sure how to go about it or if it's even feasible. Any help you can provide would be grea ...

What is the best way to maintain an input String when refreshing a page using Selenium Webdriver?

When using Selenium webdriver, I am facing an issue where the value in an input element is not retained after refreshing the page. Interestingly, when testing manually, the scenario works as expected. Is there a way to ensure that the input string remain ...

Utilize JavaScript to iterate through a JSON object and retrieve the indices that meet the specified criteria

While I found a previous answer that somewhat addresses my issue, I am seeking guidance on how to return an array of the indexes where a specific value appears. For example, if **18A38** is the target value, it should return the positions [1,3]. The sampl ...

Silent download option not functioning in Firefox 22 with Selenium using C# code

Currently, I am conducting tests on a WebPage using the selenium framework version 2.33. The specific TestCase that I am working on is supposed to verify the successful download of a file. This code snippet worked perfectly fine with Firefox version 21 an ...

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

When hovering over a card, all icons are displayed instead of just the icons for that specific card. I want to show only the icons for the card being hovered on (example output: image). The cards are generated automatically using v-for and fetching data fr ...