I have this page and I have users uploading an icon image for the industries and they are uploading a bigger image. I want to resize it via CSS and it's cutting it when changing it in Firebug. To see what I mean, select "retail" from the top dropdown "Select Industry Category" and then select "General" from "Select Business Type" and you will see the oddly shaped image. It needs to be 56 pixels * 52 pixels.
Here is my HTML:
<span class="icon select-business-icon" style="background-image: url(http://posnation.com/shop_possystems/image/data/icons/retail.png);"> </span>
I tried in the CSS to set the width and height to the desired measurements, but all it did was truncate the image and not resize.
Here's what I've done:
.resize {
width: 400px;
height: auto;
}
.resize {
width: 300px;
height: auto;
}
<img class="resize" src="example.jpg"/>
This will keep the image aspect ratio the same.
You can resize images using CSS just fine if you're modifying an image tag:
<img src="example.png" style="width:2em; height:3em;" />
You cannot scale a background-image property using CSS2, although you can try the CSS3 property background-size.
What you can do, on the other hand, is to nest an image inside a span. See the answer to this question: Stretch and scale CSS background
CSS 3 introduces the background-size property, but support is not universal.
Having the browser resize the image is inefficient though, the large image still has to be downloaded. You should resize it server side (caching the result) and use that instead. It will use less bandwidth and work in more browsers.
You can try this:
-ms-transform: scale(width,height); /* IE 9 */
-webkit-transform: scale(width,height); /* Safari */
transform: scale(width, height);
Example: image "grows" 1.3 times
-ms-transform: scale(1.3,1.3); /* IE 9 */
-webkit-transform: scale(1.3,1.3); /* Safari */
transform: scale(1.3,1.3);
Related
im trying to make Grid system with HTML and CSS but when i add some images to the system some of them jump all around(i think that it's because of pixels mismatch) and when i resize the window(because it should also be responsive) they line up kinda of funny and i don't understand where is my problem. So i'm asking you for help. Here is JSFiddle from my work.
i think that i should modify this line to make it work but im not sure.
problem is margin is in pixels and the width is in %. so 15% * 5 + 23*5 > 100% of the screen.
you need to shift the margin to % so that the sum is always 100.
15*5 = 75;
remaining space for margins = 25% / 5 = 5 for each box
so
change your column styling to
.column{
margin:23px 2.5%'
}
the shifting problem
have a look at the code:
every p has a background
#farbig_logo_mercedes {
background: url(http://www.seat-styler.de/wp- content/uploads/2017/02/Mercedes_logo_ori.png) no-repeat center top;
}
means the image is of full size and is shifted only top 65 pixels is shown and is center aligned.
and the same p has a child img with the same src
<img class="logos_bild alignnone" src="http://www.seat-styler.pl/wp-content/uploads/sites/7/2017/02/Mercedes_logo_edit.png" alt=" Mercedes Logo" width="65" height="65">
this has a specific height and width and the image adjusts into the 65x65 sqaure.
this is the image that is displayed. on hover, the opacity of img tag is set to 0 leaving the background image to show.
when there is difference in alignment of these two images, your icons dance on hover.
it is adviced NOT to use two images , one in bg and other as src especially ina responsive design like this.
if you want to use two images, use both as background
p{
background-image:url(1)
}
p:hover{
background-image:url(2)
}
or you could use filters on img
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: sepia(100%);
opacity:0.5
}
img:hover{
filter:none;
opacity:1
}
broken column #2
this is because .farbig_logo_ford has a height greater than the others;
add
.column{ max-height:113px;}
also consider using flex
.row{ display:flex; flex-wrap:wrap;}
.column{width:15%;}
remove float
https://jsfiddle.net/pmzg1nbu/3/
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 have many images inside my div where I position them so that all are complete each other’s.
Also I need that when I copy the div to other page the images sty the same but I can modife where to put the div in my page
Now my problem is:
I want these entires images inside the div to be smaller and still are complete each other
Example of My code:
<div style="position:absolute; top:900px; left:500px" >
<img id="Burimi" style="position:absolute; left:10px" src="Images/Reagion/Burimi-B.png"/>
<img id="" style="position:relative; left:98px;top:1px;" src="Images/Reagion/N Batinah-B.png" />
</div>
Example:
You can resize the container and not the images. For example you can use the following for the parent div:
div {
transform: scale(.5,.5); /*Half width and height */
-ms-transform: scale(.5,.5); /* IE 9 */
-webkit-transform: scale(.5,.5); /* Safari and Chrome */
-o-transform: scale(.5,.5); /* Opera */
-moz-transform: scale(.5,.5); /* Firefox */
}
Sounds like you'd be better using an image map. Have one image containing all the images as you'd expect them to be displayed on the page, then use areas to differentiate between the different regions on the image.
Use position:relative in the div, and position:absolute for all the images.
This way you can put the div anywhere and the images Will always be positioned relatively to the div
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>
Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?
Here's some good information about image opacity and transparency with CSS.
So to make an image with opacity 50%, you'd do this:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.
You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.
A great article explaining how to use CSS sprites.
Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
a button
The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.