Using one SVG image in a div with a width of 50px results in a height of 150px in IE11. The correct dimensions should be 50px x 50px. The width is applied correctly, but the height is not. Any suggestions?
.svg-cont{
width:50px
}
img{
max-width:100%;
height:auto;
}<div class="svg-cont">
<img src="http://imgh.us/google-plus-hvr.svg" alt="" />
</div>Thank you in advance for any assistance. Codepen link: http://codepen.io/shmdhussain/pen/YZmrOq
After adjusting the width to 100% on the image tag, the issue has been resolved. For the updated code, please refer to the following pen on CodePen: http://codepen.io/shmdhussain/pen/XMvzWv
.svg-cont{
width:50px
}
img{
max-width:100%;
width:100%;
height:auto;
}<div class="svg-cont">
<img src="http://imgh.us/google-plus-hvr.svg" alt="" />
</div>For more information, check out this reference link: https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
I am currently utilizing the [hidden] attribute within my application to conceal certain elements based on a specific condition. The situation is such that I have two divs - one for displaying results and another for showing the text "No results". Both t ...
Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...
I am facing a challenge in sending and retrieving data (username) between app.js and main.js. In my setup, I have a node app.js that calls index.html which then triggers the main.js function called "clicked". Below is the code snippets for each file: app. ...
There seems to be a height mismatch issue between the container and the image inside it when the parent is floated, but not the child. However, when both are given the float property, the height matches perfectly. Why is this? <div class="parent">&l ...
Working with the PrimeNg picklist, I have encountered a challenge. Here's what's going on: The main focus is on the first row, while the other rows do not have radio buttons (as they are part of incomplete test data). The goal is to show a drop ...
Having some issues with my tooltip functionality. It seems to display the text on the left side and fades away upon mouseover, but it doesn't show up in a proper tooltip box over the icon as expected. I suspect that there might be a conflict between j ...
Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...
Looking to extract data from a website using angularjs / javascript. I am familiar with the $http object in angularjs which can make get requests. I have used it before to retrieve json, but I'm wondering if I can use it for XML (HTML) as well? (I th ...
I recently created a website. However, when I uploaded it to my hosting company's server and tested it on different browsers, the layout appeared broken. Some of the CSS files loaded properly, but certain elements and styles were not in their correct ...
I have a website that features a Bootstrap 3 navbar. This navbar is positioned 280px below a block div and becomes sticky at the top of the page when scrolled to that point. HTML (within < head > tags) <script> $(document).ready(function() { ...
I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...
Greetings! Could someone please help me make this code function properly? I am attempting to display the DIV (slidingDiv) and navigate to the selected ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... However, the code currently only allows me to go to the ...
Extremely ancient, very old, incredibly aged beyond belief ...
One button triggers a function with a timeout that repeats itself upon clicking. Here's the code snippet: function chooseNum() { let timeout = setTimeout(chooseNum, 1000); } To disable this repeating function, I attempted another function like so ...
<?php $arr = range(1,mt_rand(40,120)); ?> <table> <?php foreach ($arr as &$value) { echo '<tr><td>' . $value . '</td></tr>'; } ?> </table> This script generates a sequence of n ...
Hello, I've been researching various sources including Stackoverflow on how to effectively use an Nth child selector and a Class together but have not had much success so far. In essence, my menu consists of Main categories (class = cat) and subcateg ...
I'm seeking a solution to create horizontal links using a list. I know that I need to apply the display: block property to the ul element and set display: inline for the li items. While there are several inquiries about maintaining a consistent width ...
I am looking to design a 2-row layout for a webpage where one row will contain filters and the other row will display results. The layout should meet the following criteria: The page height should not exceed 100% The first row's height will vary bas ...
Encountering a strange issue with IE11 regarding a series of links: <a href="page1.html" target="iframe_name">Page #1</a> <a href="page2.html" target="iframe_name">Page #2</a> <a href="page3.html" target="iframe_name">Page #3 ...
Looking for a way to extract a specific substring from a given string: var str = `<ul class="errorlist"><li>Enter a valid email address.</li></ul>`; Is there a method to extract the following substring? 'Enter a valid email ...