I have this HTML:
<div id="micrositePhotoDiv">
<img id="micrositePhoto" />
</div>
and css:
#micrositePhotoDiv {
overflow:hidden;
#include border-radius(10px);
behavior: url(PIE.htc);
}
The src for the img is set programatically in javascript.
The img is set to the width of its containing div. In ie9, firefox, chrome and so on, this makes the image have rounded borders (because the corners of the image are outside the border, and there is overflow:hidden;)
In IE8, the image does not have rounded borders. The border-radius property takes effect (I can see it behind the image if I do border: solid black 1px;) but the parts of the image outside the borders are not hidden.
Is there any way around this using css, css3pie, javascript etc? Or is this not possible to achieve in IE8?
Apply border-radius to both - div and img and it should work.
Related
I have a div that I want to expand the "hover area" of. (If your mouse is just outside of the element, the css :hover selector should still be in effect.)
I tried creating a transparent border: (border:10px solid transparent;) Unfortunately, my div has a background color, and the background "leaked" into the border area. (See fiddle for demonstration of the issue.)
I also tried using outline instead of border, but the outline doesn't seem to "count" as a part of the element when it comes to hovering. (It looks right, but won't detect the extra hover area.)
Is there any way to do this with plain CSS (preferably not many extra elements)? If not, is there a simple method using vanilla JS (no jQuery)?
$("#toggle").click(function(){
$("#attempt").toggleClass("border");
});
#attempt {
width:100px;
height:200px;
background:#aaa;
margin:50px;
}
#attempt.border {
margin:20px; /* Change margin to keep box in same place after border adds size */
border:30px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>
All you need to prevent the background to leak is the box-sizing property. It's a very important one. Just add it to #attempt:
#attempt {
box-sizing: border-box;
}
Check out the updated fiddle here. You can learn more about box-sizing here.
I am soo bad at css. I have a div in which multiple images can be put. this div is a slide.
<div id="slides">
<img src="imagename.jpg"/>
</div>
some images are e.g. 100x300 but some are 300x100. how can I scale those images according to their own dimensions so that they show up as in original form?
my live example with this bug is in here:
http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/
as you slide, the 3rd slide image doesnot show up in its full form..
A big problem you have here is that your images aren't 100x300px or 300x100px, they're instead 1920x2560px or 2560x1920px - much, much larger. They're also all around 1MB in size, which in reality is far too large for images like this. Before doing anything you should resize these images yourself to make them their desired size and ultimately reduce their file size as well.
After that, simply remove the max-width and max-height properties from your #slides img selector, then modify width and height to:
#slides img {
...
height: initial;
width: initial !important;
}
The initial value sets the image size to its initial size; that means if your image is 100x300, that is also its initial size. Using this with the images you currently have will set them to 1920x2560 or 2560x1920.
I've unfortunately had to use !important here as the slide plugin will try to force your images to 100% width.
<style>
img
{
height:100%;
width:100%;
}
</style>
<div id="slides">
<img src="imagename.jpg"/>
</div>
I have an image on a webpage. It's a pretty big image, however. It's 6144*768. In actuality, it is a series of 6 images mushed together.
I read that it's better practice to load this one image instead of loading 6 images. I've found this to be true as well, when I used tables and CSS.
However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!
How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?
[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]
Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won't be squished
HTML
<div id="imgContainer">
<img src="myImage.jpg" alt="" width="6144" height="768" />
</div>
CSS
#imgContainer
{
height: 1024px;
width: 768px;
overflow: hidden;
}
Then to move the image use negative values for the CSS style margin-left.
#imgContainer img
{
margin-left: -1024px;
}
You can do this with jQuery as follows
$("#imgContainer img").css("margin-left", "-1024px")
What OP is looking for is CSS Sprites (also see A List Apart or Smashingmag).
Don't scale your image with CSS; instead, put it in a wrapper div and do something like this in your CSS:
#myImageWrapper {
height: 1024;
width: 768;
overflow: hidden;
}
I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?
Wrap them in a container with the dimensions you want and overflow: hidden.
This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best
I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.
If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php
In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.
Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.
The problem is that the dimensions of the div box and its location will be changing dynamically via JavaScript, and the box itself must be 100% transparent.
Look at the picture to figure out what I mean. As far as I know, there is nothing that can be done via pure CSS, am I right?
Maybe you know some tricks that could help me out (except for that when it's done with four boxes on the perimeter nor when it's done with nested boxes)?
http://savepic.org/85113.png
Yeah, short of the advanced multiple background image stuff and/or border images in CSS 3, you’d need some nested divs.
Maybe something like this:
<style type="text/css">
.box-1-top,
.box-1-bottom{height: 5px; font-size: 0;/* Make height work in IE */ background: url(box-1-background.gif) left top repeat-x;}
.box-1-left{padding-left: 5px; background: url(box-1-background.gif) left top repeat-y;}
.box-1-right{padding-right: 5px; background: url(box-1-background.gif) right top repeat-y;}
</style>
<div class="box-1">
<div class="box-1-top"></div>
<div class="box-1-left">
<div class="box-1-right">
Box content here
</div>
</div>
<div class="box-1-bottom"></div>
</div>
In CSS3 you can do this by applying
Border Images
Before applying this look at
Browser support for CSS3 properties