I've decided to have my site logo as an svg, but it doesn't seem to be rendering nicely in chrome. At the 100% zoom level it looks blurry but if I zoom out a few times then it looks alright. Here is the site I'm using it on:
www.confide.re/confide
Does anyone know what might be causing this and how to fix it? Thanks
I made the svg in Illustrator CS5, if that matters.
The reason is that you use percentage to set the width of element the logo is in (parent element)
This means the logo is first rasterized from vector to an internal bitmap that is 100% of the size you set for the image. Then in your #header css rule you are using 80% for the header element which the image is inside.
What happens is that the internal bitmap the browser use to hold the rasterized vector image is scaled from 100% to 80% instead of re-rasterizing the vector. As this involves interpolation it will result in some blurry edges. This is a performance choice made by the browsers for parent's content.
The solution is to remove the 80% scaling of the header (parent) element. You can add a new rule and set the image width like this (you can of course use percentage instead - as long as the parent element isn't scaled this won't be an issue) - f.ex:
#header {
margin: 0 auto;
padding: 0;
text-align: center;
/*width: 80%;*/
}
.header-img {
width:200px;
height:auto;
}
Then in your html-code:
<img class="header-img" src="logo.svg" alt="" />
(you could have set #header img {...} but this has a performance penalty).
Here is proof-of-concept (a small difference 100 to 80%, but visible - compare the last part):
Using 100% rasterized bitmap for logo size scaled by browser to 80%:
Removing 80% from header (parent) element and for sake of example setting image width to 200px:
I don't believe that there is an issue with your SVG as it is 100% vector (no embedded PNG fies).
The most likely cause is the relatively small size of your image and how it renders at 72 dpi (a regular screen pixel density). The irregular edges of your font are being pixelised which is causing the image to look slightly blurred.
On a high resolution MacBook pro and iPhone retina, your logo looks fine and crisp.
It zooms up OK too.
Put this code on the page that is using Panzoom:
<style>
.panzoom {
-webkit-backface-visibility: initial !important;
-webkit-transform-origin: 50% 50%;
}
</style>
Related
I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes
I'm working on a photo gallery that will zoom the images during mouse over. Because the page is created dynamically, I won't know the image sizes.
To keep the image quality good, the images are full size and the CSS shrinks them to 50%. On mouse over, the images enlarge to 100%. The problem is that the div blocks take up the original unzoomed-out image size on the page, making spacing a nightmare. (spacing is as if all images were original size)
My thought was to enclose the "zoomed out" div with a parent div (imgholder below) that has it's width permanently set to 50%, this div won't change size when moused over, and should take care of the spacing issue.
This works somewhat if I set the imgholder width\height to a set value (say 300px). But since the images are all different sizes, I need to set the parent div to a percent of the child..
What would be the recommended way to set the parent sizes?
Is there a maybe a better way to do the zoom effect for a photo gallery? (I can't think of a way to use backgrounds since again the images are loaded dynamically)
my CSS is similar to...
.zoomout{
display: inline-block;
position: relative;
-moz-transform:scale(.5);
-webkit-transform:scale(.5);
-o-transform:scale(.5);
}
.zoomout:hover{
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
.imgholder{
display: inline-block;
width:200px; /*this is where i run into problems*/
height:200px; /*this is where i run into problems*/
}
my HTML is similar to...
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/4.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/5.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/6.jpg"/></div></div>
Wow, this was harder than I anticipated!
We're trying to use an image sprite as CSS background image on a responsive website in a grid.
Please check out our jsfiddle of the scenario.
So essentially, when this is resized, the background images from the sprite need to be resized to fit the parent container (<span>).
I have converted the background image to a data:image thinking this would be the first step (although I'm not sure) and now not really sure how I can make the background images from the sprite respond.
Everything I have tried so far ends up displaying the full sprite image in each container in the grid.
You're using absolute pixel values and background sizes in fluid setting.
Try converting your background-positions to a fluid unit (like percentage) and adding background-sizes to allow the spritesheet to resize with the container.
By removing the inner height of the image container and applying a padding, you can make the container's height ratio stay the same:
.credits-grid li span.image {
background: url(../images/credits.png) no-repeat;
padding-top: 90%;
height: 0;
overflow: hidden;
background-size: 500% auto;
}
Then by calculating the percentage coordinates of the sprite's location instead of the pixel value, you can allow it to freely move into place as the container changes size:
.credits-grid li span.image.c10 {
background-position: -26% 50%;
}
You can see this in action on this fiddle here: http://jsfiddle.net/nsvka987/2/
I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".
This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.
For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.
Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.
A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.
I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)
Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.
"Link"
My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.
If you'd like me to make a fiddle, just ask and you shall be given.
Thanks for reading, hope I made myself clear, English not being my primary language.
EDIT: Here's a fiddle showing how the <img> <div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up)
L.
The main issue here is the vertical alignment of images that are cropped (in your case portrait orientated images).
If you can go with default alignment of these images, this means only the top of the image is shown, you can use this technique :
FIDDLE
The CSS I added/modified from your example :
.galleryItem a{
display:block;
position:relative;
padding-bottom:50%;
overflow:hidden;
border-radius: 5px;
}
.galleryItem a img {
position:absolute;
width: 100%;
height:auto;
display:block;
}
I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. This was my solution:
min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;
The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. 'Max-height' was used as the control factor due to the rarity of portrait pictures exceeding a 1:2 ratio; meaning to control the excess of width cutoff through a height variable.
As for positioning the image inside the div, I recently found the use of this excerpt very useful:
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;
With 'margin' and 'padding' at '0', you're cutting off excess weight on the pic. '-webkit-transform: translate' will allow you to change the item's origin or pick point. Setting this to '-50%, 0%' will set the origin to the center-top of the pic (this should always have negative values for the origin to be inside the item). 'left: 50%; top: 0%;' will set the placement of the origin of the item to be at center-top of the container.
In all latest browsers(supposing your not using IE anymore) you can use "object-fit" for this purpose. just add this css:
.center-cropped {
object-fit: cover;
object-position: center;
height: 200px;
width: 270px;
}
...
And in html, you can use this class directly in the img tag:
<div>
<img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>
This will show only a "centered" version of your image, for both portrait and landscape images
I want to make a panel with background image, which can be resized vertically. So the simple idea is to split actual image in three parts: header, body-repeat-part, footer. It looks something like this
<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>
.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}
So I slice my image which is 100x100 into three parts - header.png - 100x20, footer.png - 100x40, and body-repeat.png - 100x1
Everything works fine in Ie9 and firefox. And even chrome works fine with 100% zoom. However when I change zoom in Chrome the picture becomes jagged i.e. you could see it's "glued" from 3 parts. Apparently chrome scales differently these images.
So my question is - could this be fixed somehow? Or is there any way to make resizable panel with background image?
Many thanks for the replies.
You can try to force no paddings, borders and margins on that tables and divs, and then try to add the CSS3 background size property!
.header {
background-image:url(header.png);
background-size:110px 20px;
}
More about CSS Background size properties: http://www.w3schools.com/cssref/css3_pr_background-size.asp
It is better too try to avoid tables when making a layout structure :)
EDIT:
You can try too to add the
background-size: cover;
property on the full page background so the background image will fit 100% of the width and height of the given area.
A great and very complete tutorial about background-size: http://www.css3.info/preview/background-size/