I'm a bit confused. I try to resize an image using CSS. While in Safari and Chrome the image resizes, in IE and Firefox it keeps it's original size but crops. What do I need to change to have it resized in FF and IE as well?
CSS looks as follows:
body {
background-color:black;
width: 100%;
height: 100%;
}
#image1 {
background-image: url(img/myimage.png);
background-size: 100% 100%;
position: absolute;
width: 532px;
height: 250px;
top: 100px;
left: 100px;
}
and the body:
<body> <div id='image1'></div> </body>
I've also tried your code in Firefox (17.0.1 -- OSX).
With and without
<!DOCTYPE html>
the image actually resizes as expected.
You sould check for typos in your CSS I guess.
I think you're missing a % or px in
background-size: 100% 100;
I've tested this jsfiddle in Chrome, IE, and Firefox with good results. I also added no-repeat in case there is a need to scale smaller images up.
Try making the background position fixed, and then add this to your html.
<img src="img/myimage.png" alt="background image" id="image1" />
Related
I have searched here, couldn't seem to find a solution. I know 'how' to essentially do mouseovers with jQuery if I use an actual "image" object, and have the image resized properly, I'm just trying to figure out if there is a way to do the same thing with CSS and use a specific class with background URL.
Here's my code & css:
.sample #img_id {
width: 80px;
height: 80px;
background: url('sample.gif') left no-repeat top;
}
.sample #img_id:hover {
width: 80px;
height: 80px;
background: url('sample-mouseover.gif') left no-repeat top;
}
and then my HTML code:
<div class="sample">
<div id=img_id></div>
</div>
Now - if the image is say 200 pixels by 200 pixels - the image does NOT resize. (I.e., it will 'overflow'). I was expecting the image to be resized to 80px x 80px.
I have also tried this:
.sample img {
width: 80px;
height: 80px;
background: url('sample.gif') left no-repeat top;
}
.sample img:hover {
width: 80px;
height: 80px;
background: url('sample-mouseover.gif') left no-repeat top;
}
and then my HTML code:
<div class="sample">
<img src=sample.gif>
</div>
But this doesn't work either. The 'initial' image is "resized" properly (i.e., to 80 x 80 px) - but with the mouseover, the image would be 200px x 200px (i.e., no resizing).
How do I get my sample image properly resized/scaled to fit within the 80x80px on a mousever via CSS? (Like I said, I figured it out via jQuery, I just figure there should be an easy solution with CSS, and not quite sure just how to get it resized properly).
Thanks!
The background-size property allows you to change the dimensions of the background image, unless you need it to work in IE8 and perhaps Opera Mini.
possibly syntax, it's working on this fiddle
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.
I want all (or just some) of my images getting resized automatically when I resize my browser window.
I've found the following code - it doesn't do anything though.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?
To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.
source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
Define the width and/or height using % values.
Use a series of #media queries to set the width and height to different values based on the current screen size.
This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:
img {
width:30%;
height:auto;
}
That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:
the CSS portion:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
the HTML portion:
<img src="logo_001_002.png" class="logo">
Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.
Hopefully this helps. Have a great day!
The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Change the window width and the image scales obligingly.
I have an HTML page to which I am applying background image using CSS properties.
The problem is, I want this background image to appear at bottom of the relatively longer page, i.e. the page is to be scrolled to bottom to view the background image.
I applied following:
body {
background: url("images/bg_homepage.png") no-repeat scroll right bottom transparent;
}
This works fine for Firefox and Internet Explorer, but doesn't work for Chrome and Safari browsers. Chrome and Safari needs the background-attachment property to be set to "fixed", but that is exactly I don't want.
Please guide.
Thanks
If you dont want it in your body, you could create an div with and id bg for example :)
and then do something like this
#bg {
background: url("/bg.gif") no-repeat scroll left bottom #FFFFFF;
bottom: 100px;
height: 396px;
position: fixed;
width: 288px;
z-index: -1;
}
if you dont want to use fixed anywhere on the page, it won't work in the major browsers :(
I've done that with
body {
width: 100%; height: 100%;
position: absolute;
background-image: url(img/strand_402.jpg);
}
Works in all browsers (including IE).
I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP).
This works okay in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when the page was loaded.
This also works okay in Safari, but sometimes the image is loaded with its minimum width/height. Maybe this is caused by the image size, I am not sure. (If it loads okay, try to refresh several times to see the bug.)
Any ideas on how could I make this more bulletproof? (If JavaScript will be needed I can live with that, too, but CSS is preferable.)
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
2018 and later solution:
Using viewport-relative units should make your life way easier, given we have the image of a cat:
Now we want this cat inside our code, while respecting aspect ratios:
img {
width: 100%;
height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">
So far not really interesting, but what if we would like to change the cats width to be the maximum of 50% of the viewport?
img {
width: 100%;
height: auto;
/* Magic! */
max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">
The same image, but now restricted to a maximum width of 50vw
vw (=viewport width) means the image will be X width of the viewport, depending on the digit provided. This also works for height:
img {
width: auto;
height: 100%;
max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">
This restricts the height of the image to a maximum of 20% of the viewport.
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};
In IE onresize event gets fired on every pixel change (width or height) so there could be performance issue. Delay image resizing for few milliseconds by using javascript's window.setTimeout().
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
Set the resize property to both. Then you can change width and height like this:
.classname img{
resize: both;
width:50px;
height:25px;
}
Are you using jQuery?
Because I did a quickly search on the jQuery plugings and they seem to have some plugin to do this, check this one, should work:
http://plugins.jquery.com/project/jquery-afterresize
EDIT:
This is the CSS solution, I just add a style="width: 100%", and works for me at least in chrome and Safari. I dont have ie, so just test there, and let me know, here is the code:
<div id="gallery" style="width: 100%">
<img src="images/fullsize.jpg" alt="" id="fullsize" />
prev
next
</div>
Initially, I was using the following html/css:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
<div>
<img src="..." />
</div>
Then I added class="img" to the <div> like this:
<div class="img">
<img src="..." />
</div>
And everything started to work fine.
Just use this code. What most are forgeting is to specify max-width as the max-width of the image
img {
height: auto;
width: 100%;
max-width: 300px;
}
You can use CSS3 scale property to resize image with css:
.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
Further Reading:
CSS3 2D Transforms
CSS3 Hover Effect Transitions, Transformations, Animations
Try
.img{
width:100vw; /* Matches to the Viewport Width */
height:auto;
max-width:100% !important;
}
Only works with display block and inline block, this has no effect on flex items as I've just spent ages trying to find out.