I am having an issue with displaying large dimension SVG images in firefox. In chrome the image shows without any problem, But in Mozilla Firefox the image is not showing.
If I open that image alone in a separate tab the image displays, But not with html page.
png Image is working fine. Only SVG images having this issue.
I am attaching a sample code here
.box {
width:60px;
height:60px;
overflow: hidden;
margin-bottom:20px;
background:#000;
}
.box img {
height:100%;
}
<div class="box">
<img src="https://cdn1.imggmi.com/uploads/2019/5/13/17fdee32fe17f99ecc798e99a0c945e4-full.png"/>
</div>
<div class="box">
<img src="https://svgshare.com/i/D2d.svg"/>
</div>
This is the codepen link
Can any one please help me with this?
I managed to fix this issue by using object tag instead of img tag. The code looks like this,
Object Name
Related
So basically what I want to do is this:
Lets take this svg as an example:
https://www.freepik.com/free-vector/blank-screen-laptop-gadget-icon-white-background_9306518.htm
What I want to do in my next.js project is following:
Put my own code inside the "monitor" area of this notebook.
Also make this responsible
So I need a good way to display the notebook and then I create my own div thats the same height and width as the notebook screen and I can put anything else I want into it (paragraphs, h1 etc). So it seems that my code / page appears directly onto the notebook screen.
What is the best way to achieve this?
I heard about clip-path but I wasn't able to wrap my head around this.
Or no SVG at all
Make the laptop PNG screen transparent, and position it over your content
<style>
#LAPTOP{
position:relative;
overflow:hidden;
width:300px;
height:200px;
}
#SCREEN,#BORDER{
position:absolute;
}
#SCREEN{
margin:1em;
margin-left:3em;
}
#MAP{
zoom:.5;
}
#BORDER{
width:100%;
height:100%;
z-index:999;
}
</style>
<div id="LAPTOP">
<div id="SCREEN">
<b>Hello World!</b>
<img id="MAP" src="//lh3.googleusercontent.com/proxy/7OrKxhEgjUlMNO280hA_iums8CxNpExIwZARBhDjhboAEgof-YYF7s4I9di1HREv3QKyzadoXZ74PlelwJ7ejpLBl5lXRto">
</div>
<img id="BORDER" src="https://i.ibb.co/yd47GPy/laptop-screen.png">
</div>
I have a main div named "backhead" that has a background image with other divs inside. The main div doesn't show on my website (using Chrome Inspect to troubleshoot). The div isn't there, as if the name is spelled wrong, or a colon is missing, etc.
Does anyone know why this would be happening? Here's my code (all other div class and ids are working fine):
CSS file:
#backhead {
position:absolute;
background-image:url("images/headerbackground.jpg");
width:100%;
height:100%;
}
.toplogo {
float:left;
padding:1.25em 0;
position:relative;
}
.rightinfo{
float:right;
width:61%;
position:relative;
}
In the PHP file:
<div id="backhead">
<div class="toplogo">
<img src="http://example.com/images/headerlogo.png"></div>
<div class="rightinfo">
<h2>Personal Specialist</h2>
</div>
</div>
height:100%;
This will work only if the parent element has height specified. If it is inside of autoheighted element, it would be replaced by auto and became 0 if there is no content.
Check for
html, body {
height: 100%;
margin: 0;
}
if the element is placed directly in the body.
Even if that CSS was invalid the div should still show up within the markup. I ran the code on jsfiddle and it showed up fine. This leads me to believe that you may just need to clear your cache especially id you're hosting this on real server.
Try running it in a Chrome Incognito mode and see what happens.
I use bootstrap 3. I try to use "icon link" by using tag <a> as shown below:
HTML:
CSS:
.link {
background-image: url(img/icon.png);
}
It is important to say, that my stylesheet is in "main folder", that is in folder, where is a img folder with icon.png file. So it seems wrong url is not the case.
I can't figure out why image is not showing.
The anchor element has no content, and it has no styles that would affect it's dimensions, consequently it has an effective area of zero square pixels.
The background image is probably being applied just fine, you can't see it because there is no area on which it can be displayed.
The code implies that the image is there to tell the visitor where the link goes, that would mean that the image is content and not background and should be expressed as an image element (which would take on the dimensions of the image file automatically).
Using an image element also provides you with the opportunity to supply alt text for the benefit of screen readers / search engines / people with internet connections that briefly fell over while loading the image / etc.
<img src="img/icon.png" alt="top of page">
Because your is empty.
You need to give it a size :
.link {
background-image: url(img/icon.png);
height:100px;
width:100px;
display:block;
}
You have to make the tag enought big to show the image
Example:
CSS:
.link {
background-image: url(img/icon.png);
display: block;
width: 100px;
height: 100px;
}
I made an image in paint.net and saved as .png. The image borders are visible, but there is no imagecontent. This is my code:
HTML
<img id="logo" href="../img/templog.png" />
CSS
#logo {
align: left;
display: inline;
width: 100px;
height: 100px;
}
Inside the brackets, there is a preview of the image and in the web (chrome) there are only borders..
thanks
Try to change the second href with src, <img id="logo" src="../img/templog.png" />
any types of image should appear in chrome
Have you tried using a different image in chrome to see if that loads?
Can anybody advise me on this? WebKit browsers keeps on putting a gray 1px border around disabled images. The reason I need this removed is for email optimization for when email clients have images disabled. Works fine in Firefox, but WebKit browsers keep showing the border.
I have tried border:none !important everywhere including inline, but Chrome/Safari are being stubborn.
Edit: Here is sample html with inline css
<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />
Amit's answer is just great, but a small advice:
use visibility: hidden; instead of display: none;
img:not([src]) {
visibility: hidden;
}
so you could save img block size and positioning of other elements. its usefull in most cases, i use it on my sites with images lazyload and show just blank block before the image loads.
If img src is not present or broken then use below css code
img:not([src]){ display:none; }
this css hide image till img src is not loaded completely.
There is no way to remove it but I wrapped the image in an element that has overflow hidden property in its styles.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hide Broken Image border</title>
<style>
body{
background-color:azure;
}
.image-container{
width:100px;
height:100px;
overflow:hidden;
display:block;
background-color:orange; /*not necessary, just to show the image box, can be added to img*/
}
.image-container img{
margin:-1px;
}
</style>
</head>
<body>
<span class="image-container">
<img src="path-to-image" alt="I'm Broken :(" width="102" height="102">
</span>
</body>
</html>
Take a look at this bin
http://jsbin.com/OpAyAZa/1/edit
Browsers don't seem to really give you a way to remove that border. Your simplest solution is to change your img to a div and apply the image as a background.
That way, if there's no src, you won't get the broken image icon and border.
Update: Microsoft Outlook makes things difficult, and the cure is almost worse than the disease: vector markup language, shape elements, imagedata elements, etc. If you google around you'll see how to use them http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/
Outlook users might just have to go without the image so that you can call it a day.
Try using some JavaScript to remove the broken image. Thats the only way
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
var self = images[i];
self.onerror = function () {
self.parentNode.removeChild(self);
}
}
Because rendering of broken image varies from browser to browser and it could not be altered.
P.S: onerror will fire when the image is not loaded
You can try this code to remove borders around broken images in webkit.
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
var self = images[i];
self.onerror = function () {
self.parentNode.removeChild(self);
}
}