First off, I'm new to this and have been doing a lot of research, but can't find the answer.
I have set a div container at the top of my page to 100% width and 20% height.
I wanted to insert an image which would resize automatically across screen sizes.
I found some code on this site which works perfectly in safari and chrome (also resizes perfectly on an ipad and iphone) but in firefox(20) and IE(10) the image does resize slightly but wont stay in the parent container.
Can anyone help?
The original code I have been using is:
<html>
<style type="text/css">
#myDiv
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
</style>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</html>
Any help would be appreciated (and please remember I'm learning!)
#myDiv img
{
width:100%;
height:100%;
margin:auto;
display:block;
}
You need to set the actual width/height of the image to 100%, not the max-width and max-height.
Related
How can I do similar responsive images? Like on this page.
http://pixelgrade.com/demos/border/
I was trying do this with css, but with no effects.
Thanks.
Use background-size:cover property
html, body{
height:100%;
}
.responsive_bg{
background:url("http://upload.wikimedia.org/wikipedia/commons/5/51/ShiFengWaterFall_002.jpg") no-repeat;
background-size:cover;
width:100%;
height:100%
}
DEMO
This image is set as a background-image. Do you have any code to share with us so we might help?
Basically, instead of writing the usual image:
<img src="this/cool/image.png" />
you would use a regular div that you size according to the responsive behavior you want to see:
<div style="background-image: url(this/cool/image.png)"></div>
and the CSS that comes with to style the image (background) itself:
div{
background-size:cover; // fills the div
background-position; 50% 50%; //centers the background
//add here some way to get your div to be the proper size for responsiveness
}
And of course, you use media-queries to add some more responsiveness to the whole shenanigan.
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
I am using the jQuery Cycle (full) Plugin on a page where I am using a container DIV (.content-left) with a width of 75% and a jQuery Cycle slideshow inside of that container. The images inside of that container should be adjusted automatically.
I use:
JS:
$('.slides').cycle({
fx: 'fade',
containerResize: 1 // default for jquery.cycle.all
});
HTML:
<div id="content">
<div class="content-left">
<div class="slides">
<img src="...">
<img src="...">
<!-- etc. -->
</div>
</div>
<div class="content-right">
some text
</div>
<div class="clear"></div>
</div>
CSS:
#content {
overflow:hidden;
}
#content .content-left {
width:75%;
float:left;
}
#content .content-left img { /* or: .slides img */
width:100% !important;
position:relative;
left:0px;
top:0px;
z-index:-2;
}
#content .content-right {
width:25%;
float:right;
}
On Page init my wrapping DIV's (.content-left) height and width get's adjusted just fine thanks to the containerResize function. However when I resize my browser window, the width and height of the slides stay the same, which is not what I wanted.
containerResize: 0 doesn't bring the desired effect either (it then ignores the height of the images and adjusts the height of the wrapper to the height of .content-right (and cuts off the image)).
When I am using only an image without loading Cycle at all everything works fine.
Any solutions for that?
Thanks!
Set in JS:
containerResize: 0,
slideResize: 0,
(really!) and then use the trick of transparent image in the container div. See here
for detail.
How about trying max-width: 100% !important; on the images, and remove the !important from the width: 100% !important, so that when cycle attempts to resize your slides back to the original width, your max-width definition will take precedence.
If you could provide a jsfiddle, that would also be of great help.
I`ve tried a couple of things even using the CSS clip, but not getting it proportionally fit in the thumbnails here http://giantmango.com/arttest2-2510.
In CSS, what is the best way and how would I proportionally resize an image to display in dimensions of a 200px (width) x 150 (height) thumbnail?
Just checked firebug and for some reason all my img tags are always set to a height of 200 even though I have max-height set to 150...
Use max-height and max-width. Beware that they are broken in older versions of IE. You can do
#myImage: {
max-height: 150px;
max-width: 200px;
}
EDIT: #tokiowp: try this. It should work (it surely does for me). So the problem with your layout comes from additional properties you may have set.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
</body>
</html>
EDIT: it turns out, looking at your source, that you are actually declaring your images with something like
<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78" width="200" height="200"/>
Of course what you need is to remove these declarations of width and height.
css:
#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}
html:
<div id="thumb"><img src="tb01.jpg"></div>