Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I added an background image inside a container that was smaller than the image. It was part of the plan. Even though it automatically rotated itself 90deg, without me touching anything (there was 3 other boxes with the exact same settings, not the same image though.). Any idea how to fix that, or what it is happening?
EDIT: Issue solved, Kyle Shrader told me to use and EXIF tool, which I did. That told me the photo was rotated 90 degree, in the metas, even though it looked fine front end. I used an exif editor and put it on Horizontal (normal value for a photo) instead of Rotated 90 CW.
If the image has EXIF orientation set, some browsers will interpret this and automatically rotate the image. You can use a tool like EXIF Data Viewer to quickly check that this is not the case for you.
If this is the case, you can solve the issue in your style sheets or in the image file itself.
To solve this problem with CSS, use the image-orientation css property to set your image orientation. image-orientation: 0deg; is what you could use, in your case.
To remove the EXIF tag from the file, you can use a tool like theXifer EXIF Purge
edit: replaced the originally linked online solution with an offline solution. With each there are concerns. Online solutions pose an issue to leaking company information or assets. Obviously you should only use trusted offline solutions, since this could pose a security risk. Thank you for the recommendation, #TomerOfer
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have included a transparent png in my Website and it has white pixels on the borders and they look really buggy.
I have double checked that's not the image itself that includes this pixels and also no border is set in CSS.
Would be happy, if anyone knows this issue and can help.
Here is a screenshot of what I mean:
You can use vector applications to create a logo. Like the "Corel Draw". I created your logo for the sample
This is not possible in CSS.
The white border is included in the image.
The solution is to use an image editor like Photoshop :
Select the transparent area with the Magic Wand Tool
Dilate 1px (or more if needed)
Press delete
Save as PNG
You will have to use an image editor such as GIMP or Photoshop.
If you got this from an artist you can complain to them that their exported image has a white border. Otherwise you'll have to use a brush and erase them yourself, which can be painful.
Problem is solved!
I have saved that image for web with a different color space and that caused the issue :/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
Not a Wordpress expert, but reasonably well versed in HTTP/HTML/CSS/Javascript/etc. Customer has a Wordpress site of not recent vintage, and I want to just get in, do the minimal required work, and get out. A page needs an image, so I upload it to the "Media Library". Push buttons and doodads to insert it into page, view the result and... the image looks blurry.
Some hours later, I understand there's a ton of Q&A about blurry images on Wordpress, but AFAICT they have nothing to do with my problem. When I view the image in a browser, it is reliably being scaled up by precisely 4/3 (1.33333...).
What drives me nuts is, I pick a browser, load the page, go into the console debugger, and it agrees both that the image is being rendered at 4/3, but also knows exactly what the correct original size is. Fine, but I should be able to see why it is rendering at 4/3. I cannot locate any relevant CSS parameter that is causing this. I have tinkered with enumerable combinations, including elaborations where I shove the img in a div and set the width of that div, etc. Every single time, the browser calmly scales the image up. In Firefox's console debugger, the "box model" view displays the actual original size rather than the scaled-up blurry size.
I feel I have eliminated PHP and Wordpress by just using Ctrl-U or the browser debugger to look at the result. But apparently somebody has managed a trick I don't understand, so I'm not sure whether to view this as a Wordpress question, CSS question, or what. So I'm flinging this question out in case the magic scale factor of 4/3 rings a bell with someone who immediately knows what the problem is. Let me know if other info is required to locate the problem.
I just checked it in IE11 on a virtual machine running Win10 and it was the correct size. It may sound daft, but are you sure you haven't accidentally enabled zooming in your browser?
This might sound simple-stupid, but sometimes, we all tend to miss something trivial:
While inserting the image/s into page, there is a column called ATTACHMENT DETAILS (extreme right). Down below on this column, there is a Size dropdown. Have you tried adjusting that? HTH.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm building a photography portfolio website, which will have a fluid, responsive design. To have the images look good at all sizes, and to not have to deal with retina resolution issues, I'm thinking of just using SVG files for all images.
Using SVGs sounds like a perfect solution to these issues, but for some reason I haven't seen any websites exclusively use them, which makes me wonder if there are any downsides to them (aside from lack of support in IE8, which I don't care about).
If you use them too much, or in animated form the end user might have some performance issues, especially on smart phones. Icon fonts are much CPU-friendly, but they are much simple and monochromatic.
Other than the lack of support for older-browsers, there's no downside to them. We love SVGs.
As mentioned in the comments, I would go with SVG icons/sprites/cartoons, and stick to bitmap/raster formats for photos. Photographs are bitmaps by nature, and when trying to convert them to vectors you may find some issues:
Not everything can be converted into a vector... or it could, but at a high price (bigger file size, complex files that require more processing). Then we could start a whole debate about file size vs image quality.
You are limited by the camera/lens technology: using photos in SVG may give crispier/sharper edges on scale, but the details inside won't appear because they are not there (e.g.: you may have a picture of a hand in SVG, but it doesn't matter how much you zoom in, you may prevent pixelation but you won't see the cells either).
Older browsers will not support the format (although you already mentioned that this is not a problem in your case).
Then there are other issues specific to a photography portfolio/store website:
If you are planning on selling the pictures, by using SVG you'd be giving the product away for free: right-click, "Save image as..." and the user will have the full size image without paying.
You could add a message/watermark to prevent that (or to sign/give credit to yourself), but watermarks would be "easy" to remove. And sadly we all know how the Internet works.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've just edit one page, and in my local computer its get perfect. I made the things in such way that the navigation menu still in a position in with it got a good look in contrast to the background image (transparent navigation background, with black characters over a part of the background menu where it is white). It's looking like this in my local machine:
But when I send it to remote servers, it get ugly, in unless two different ways, as follow:
This first, ugly, and;
This 2dn, even more ugly.
What could be happening?
First off - The second host is using an extra element, probably for tracking, or alike, which causes your style for div-elements, to apply to that aswell. You should use specific id's or classes for your elements, instead of just "div". Especially with "background"-properties.
You could solve this by adding following:
--some code--
<body><div><header></header>
--rest of the code
To
--some code--
<body><div id="container"><header></header>
--rest of the code
And changing in style.css: div {....to div#container {....
In my browser, the first link looks like your image, as it should, aswell.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've taken out all of the styles on a page, and I'm still seeing this really odd font border issue. All of the text is really weighted, and I've ran out of things to debug. Here is what it looks like close up:
See the light blue and tan edges? That's what it looks like close up, but at 100% it just makes all of the text look really dark and weighted. Oddly enough the only fix I've been able to find is changing the z-index of a certain element(a header), but that won't work for the long term b/c it renders the header unclickable. I'm using Chrome 36 on OSX, and it turns out that this occurs even with as simple a page as:
<html>
<head>
</head>
<body>
link
</body>
</html>
Anyone have any idea?
That's not a border, that's the lcd smoothing algorithm. It works by assuming a particular orientation of RGB cells on the LCD monitor, so it can turn on e.g. 1/3 of a pixel at a time for a "smoother" font. You can turn off smoothing in Windows by disabling "ClearType", but know that your viewers are likely to have it enabled.
References:
http://szafranek.net/works/articles/font-smoothing-explained/
http://www.davidjnice.com/articles/windows7_disableClearType.html