while using border-radius Opera won't actually hide the overflowing parts of elements. I already tried to apply things I managed to find in similar threads, such as defining the border style or paying attention to positioning with absolute and relative parameters. It is still not working though.
html
<div class="node">
<div class="skill skill1"></div>
<div class="skill skill2"></div>
<div class="skill skill3"></div>
<div class="skill skill4"></div>
</div>
css
.node {
position: relative;
width: 250px;
height: 250px;
opacity: 0.9;
border-radius: 50%;
overflow: hidden;
left: -60px;
border: solid 1px transparent;
}
.skill {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
}
.skill1 {
background-color: #26ac79;
-webkit-transform: rotate(90deg) skewX(45deg);
transform: rotate(90deg) skewX(45deg);
}
.skill2 {
background-color: #25765f;
-webkit-transform: rotate(135deg) skewX(45deg);
transform: rotate(135deg) skewX(45deg);
}
.skill3 {
background-color: #25313f;
-webkit-transform: rotate(180deg) skewX(45deg);
transform: rotate(180deg) skewX(45deg);
}
.skill4 {
background-color: #25193d;
-webkit-transform: rotate(225deg) skewX(45deg);
transform: rotate(225deg) skewX(45deg);
}
Here's the fiddle:
http://jsfiddle.net/Mu9Ar/
Thanks for any help.
Actually the code you provided works in latest Opera with Blink engine, so I guess you can leave your code as is. However if you need it to work in versions up to 12.16 and your page background is white, what you can do is to put .png overlay over your chart which will clip the chart, just like webdevelopers did in old days when there were no border-radius:)
According to the W3 specification:
http://www.w3.org/TR/css3-background/#corner-clipping
A box's backgrounds, but not its border-image, are clipped to the
appropriate curve (as determined by ‘background-clip’). Other effects
that clip to the border or padding edge (such as ‘overflow’ other than
‘visible’) also must clip to the curve. The content of replaced
elements is always trimmed to the content edge curve.
It appears that Firefox implemented the spec correctly by clipping the content to the edge of the curve when using overflow: hidden.
However, Opera is not compliant on this detail.
As an aside, if you add border-radius property to an img element, the image will be clipped correctly.
At this moment, there is no work-around that I know of unless you try HTML5 canvas.
I am making an interactive map and want to have buttons on it that will change color (separate image) when hovered over, and then link to different images.
I am having a huge problem with making this work... My current css is a mess:
a.button
{
position: inherit;
display:block;
background:transparent url('images/button.png') bottom;
background-repeat: no-repeat;
}
a.button:hover
{
position: inherit;
background-image: url('images/button_hover.png');
background-repeat: no-repeat;
}
#one
{
position: fixed;
left:225px;
top:702px;
}
HTML:
<div id="map"><img src="images/map.png"/></div>
<a href="http://matthewligotti.com" class="button"/>
<img src="images/button.png" id="one"/>
</a>
</div>
So I want the images to be links and hover the same two images for each button the only thing changing would be the links they bring you to. How do I do this?
If you can edit the images, you can combine them into one .png by stacking them on top of each other. Then, if buttons the buttons were 100px x 200px, you could do something like this:
a.button
{
display:block;
height:100px;
width:200px;
background-image:url('1.jpg');
background-position:0 0;
background-repeat: no-repeat;
}
a.button:hover
{
background-position:0 -100px;
}
and
<a href="http://matthewligotti.com" class="button"/></a>
<a href="http://matthewligotti.com" class="button"/></a>
which would switch the top or bottom half of the new double-image being displayed.
does that do what you mean?
I have a small issue about css3 and trapeze. I have two square images side by side (float left each - white dots) and I want them to look like this :
How would you do it? Is it possible?
If the pic1 is a .png and the negative space created by the angle of the trapeze edge is transparent, then this should work:
#pic1, #pic2 {
float: left;
position: relative;
}
#pic1 {
z-index: 2;
}
#pic2 {
right: 30px; /* Or whatever the difference in image sizes is */
}
You can use the CSS triangle trick with the transparent borders
html
<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>
css
.pic{
width:100px;
height:100px;
float:left;
text-align:center;
line-height:100px;
color:white;
position:relative;
}
.pic-1{
background:orange;
}
.pic-2{
background:limegreen;
}
.pic:after{
content:'';
display:block;
position:absolute;
height:0;
width:0;
z-index:10;
}
.pic-1:after{
top:0;
right:-10px; /* must match the border left */
border-left: 10px solid orange; /*play with width to change angle*/
border-bottom:50px solid transparent;
}
.pic-2:after{
bottom:0;
left:-10px; /* must match the border right*/
border-right: 10px solid limegreen;/*play with width to change angle*/
border-top:50px solid transparent;
}
Demo at http://jsfiddle.net/gaby/eh2f3/
First of all you begin setting a strip that will cut alogn the top and botom borders, and where you will place the images:
.demo1 {
overflow-y: hidden;
}
Inside, there will be the base elements, that are floated left,
.base {
width: 100px;
height: 100px;
float: left;
}
Inside, a clipping element rotated:
.demo1 .clip {-webkit-transform: rotate(15deg);}
.clip {
height: 177%;
width: 125%;
margin-top: -40%;
-webkit-transform-origin: 0% 50%;
overflow: hidden
}
and inside, the image, counter-rotated
.demo1 .inner {
-webkit-transform: rotate(-15deg);
}
.inner {
-webkit-transform-origin: 0% 50%;
margin-left: -151%;
margin-top: 19%;
}
The html is :
WEBKITTED DEMO
webkitted means that only webkit prefixes are used :-)
Since somebody out there was offering 1 milliion points, I decided to do an extra effort. See the second strip (demo2) where the rotations are specified thru nth-child(). That allows to get different angles for every transition.
Full CSS :
.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}
.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}
.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}
Note the calculus to place the images accurately are strange; I end doing it by trial and error. Also, you need images with plenty of margin to be cutted without losing the point of interest.
I'm trying to fill a window with an image. I'm using CSS to try to work this, but I was wondering if there's a way to maximize the width/height of the image until all the white space is filled, but not ruin the quality.
<div class='rel-img-cont'>
<img src='src.jpg' />
</div>
.rel-img-cont
{
width: 100px; height: 100px; overflow: hidden;
}
.rel-img-cont img
{
height: 100px; margin:0 0 0 0;
}
How can I fill the white space so even if one of the sizes has to overflow, it will only go up to 100px.
Is there a way to do this even if the original image is say, 100px x 100px or 150px x 200px, no matter which one, 100px is max, so one of the sides will have to give.
Thanks
You may find background-size css property interesting. Because this property does the same which you are trying to approach here. But this will work for background-image.
background-size: 100% 100%;
.rel-img-cont {
width: 100%;
height: 100%; }
.rel-img-cont img {
height:100%;
width:100%; }
Please see the demo
You can make width as 100% and leave the height to auto. And use only those img's which are proportionate to your div.
Use this code which is tested on my machine
<style>
.rel-img-cont
{
width: 10%; height: 10%; overflow: hidden;
border:3px solid orange;
}
.rel-img-cont img
{
height: 100%; margin:0 0 0 0;
width:100%;
}
</style>
Its better to use % instead of px in this case
<div id="Maindiv" style="width:100px;height:100px">
<img id="Img" src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" alt="Image" />
</div>
CSS
#Maindiv img
{
width:100%;
height:100%;
}
I need to make this image stretch to the maximum size possible without overflowing it's <div> or skewing the image.
I can't predict the aspect-ratio of the image, so there's no way to know whether to use:
<img src="url" style="width: 100%;">
or
<img src="url" style="height: 100%;">
I can't use both (i.e. style="width: 100%; height: 100%;") because that will stretch the image to fit the <div>.
The <div> has a size set by percentage of the screen, which is also unpredictable.
Update 2016:
Modern browser behave much better. All you should need to do is to set the image width to 100% (demo)
.container img {
width: 100%;
}
Since you don't know the aspect ratio, you'll have to use some scripting. Here is how I would do it with jQuery (demo):
CSS
.container {
width: 40%;
height: 40%;
background: #444;
margin: 0 auto;
}
.container img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.container img.tall {
max-height: 100%;
max-width: 100%;
width: auto;
}
HTML
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
<img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>
Script
$(window).load(function(){
$('.container').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
There is a much easier way to do this using only CSS and HTML:
HTML:
<div
class="fill"
style="background-image: url('path/to/image.jpg');">
</div>
CSS:
.fill {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
This will place your image as the background, and stretch it to fit the div size without distortion.
Not a perfect solution, but this CSS might help. The zoom is what makes this code work, and the factor should theoretically be infinite to work ideally for small images - but 2, 4, or 8 works fine in most cases.
#myImage {
zoom: 2; //increase if you have very small images
display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
If you're able to set the image as a background-image then you can do something like this, which will crop the image without stretching it:
<div style="background-image: url(...); background-size: cover; width: 100%; height: 100%;"></div>
If you need to stick with an <img> tag, then as of 2019, you can now use the object-fit css property that accepts the following values:
fill | contain | cover | none | scale-down
See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
As an example, you could have a container that holds an image:
<div class="container">
<img src="" class="container_img" />
</div>
.container {
height: 50px;
width: 50%;
}
.container_img {
height: 100%;
width: 100%;
object-fit: cover;
}
If you can, use background images and set background-size: cover. This will make the background cover the whole element.
CSS
div {
background-image: url(path/to/your/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
If you're stuck with using inline images there are a few options. First, there is
object-fit
This property acts on images, videos and other objects similar to background-size: cover.
CSS
img {
object-fit: cover;
}
Sadly, browser support is not that great with IE up to version 11 not supporting it at all. The next option uses jQuery
CSS + jQuery
HTML
<div>
<img src="image.png" class="cover-image">
</div>
CSS
div {
height: 8em;
width: 15em;
}
Custom jQuery plugin
(function ($) {
$.fn.coverImage = function(contain) {
this.each(function() {
var $this = $(this),
src = $this.get(0).src,
$wrapper = $this.parent();
if (contain) {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/contain no-repeat'
});
} else {
$wrapper.css({
'background': 'url(' + src + ') 50% 50%/cover no-repeat'
});
}
$this.remove();
});
return this;
};
})(jQuery);
Use the plugin like this
jQuery('.cover-image').coverImage();
It will take an image, set it as a background image on the image's wrapper element and remove the img tag from the document. Lastly you could use
Pure CSS
You might use this as a fallback. The image will scale up to cover it's container but it won't scale down.
CSS
div {
height: 8em;
width: 15em;
overflow: hidden;
}
div img {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
max-width: none;
max-height: none;
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hope this might help somebody, happy coding!
Thanks to CSS3
img
{
object-fit: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
IE and EDGE as always outsiders:
http://caniuse.com/#feat=object-fit
That's impossible with just HTML and CSS, or at least wildly exotic and complicated. If you're willing to throw some javascript in, here's a solution using jQuery:
$(function() {
$(window).resize(function() {
var $i = $('img#image_to_resize');
var $c = $img.parent();
var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();
$i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
});
$(window).resize();
});
That will resize the image so that it will always fit inside the parent element, regardless of it's size. And as it's binded to the $(window).resize() event, when user resizes the window, the image will adjust.
This does not try to center the image in the container, that would be possible but I guess that's not what you're after.
You can use object-fit: cover; on the parent div.
https://css-tricks.com/almanac/properties/o/object-fit/
Set width and height of the outer container div. Then use below styling on img:
.container img{
width:100%;
height:auto;
max-height:100%;
}
This will help you to keep an aspect ratio of your img
If you want to set a max width or height (so that it will not be very large) while keeping the images aspect-ratio, you can do this:
img{
object-fit: contain;
max-height: 70px;
}
I came across this question searching for a simular problem. I'm making a webpage with responsive design and the width of elements placed on the page is set to a percent of the screen width. The height is set with a vw value.
Since I'm adding posts with PHP and a database backend, pure CSS was out of the question. I did however find the jQuery/javascript solution a bit troblesome, so I came up with a neat (so I think myself at least) solution.
HTML (or php)
div.imgfill {
float: left;
position: relative;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
width: 33.333%;
height: 18vw;
border: 1px solid black; /*frame of the image*/
margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
This might be some info
</div>
By using style="" it's posible to have PHP update my page dynamically and the CSS-styling together with style="" will end up in a perfectly covered image, scaled to cover the dynamic div-tag.
To make this image stretch to the maximum size possible without overflowing it's or skewing the image.
Apply...
img {
object-fit: cover;
height: -webkit-fill-available;
}
styles to the image.
Using this method you can fill in your div with the image varying ratio of divs and images.
jQuery:
$(window).load(function(){
$('body').find(.fillme).each(function(){
var fillmeval = $(this).width()/$(this).height();
var imgval = $this.children('img').width()/$this.children('img').height();
var imgClass;
if(imgval > fillmeval){
imgClass = "stretchy";
}else{
imgClass = "stretchx";
}
$(this).children('img').addClass(imgClass);
});
});
HTML:
<div class="fillme">
<img src="../images/myimg.jpg" />
</div>
CSS:
.fillme{
overflow:hidden;
}
.fillme img.stretchx{
height:auto;
width:100%;
}
.fillme img.stretchy{
height:100%;
width:auto;
}
This did the trick for me
div img {
width: 100%;
min-height: 500px;
width: 100vw;
height: 100vh;
object-fit: cover;
}
if you working with IMG tag, it's easy.
I made this:
<style>
#pic{
height: 400px;
width: 400px;
}
#pic img{
height: 225px;
position: relative;
margin: 0 auto;
}
</style>
<div id="pic"><img src="images/menu.png"></div>
$(document).ready(function(){
$('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}
but i didn't find how to make it work with #pic { background:url(img/menu.png)}
Enyone?
Thanks
I had similar issue. I resolved it with just CSS.
Basically Object-fit: cover helps you achieve the task of maintaining the aspect ratio while positioning an image inside a div.
But the problem was Object-fit: cover was not working in IE and it was taking 100% width and 100% height and aspect ratio was distorted. In other words image zooming effect wasn't there which I was seeing in chrome.
The approach I took was to position the image inside the container with absolute and then place it right at the centre using the combination:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Once it is in the centre, I give to the image,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
This makes the image get the effect of Object-fit:cover.
Here is a demonstration of the above logic.
https://jsfiddle.net/furqan_694/s3xLe1gp/
This logic works in all browsers.
HTML:
<style>
#foo, #bar{
width: 50px; /* use any width or height */
height: 50px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">
JSFiddle
...And if you want to set or change the image (using #foo as an example):
jQuery:
$("#foo").css("background-image", "url('path/to/image.png')");
JavaScript:
document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
Many of the solutions found here have some limitation: some not working in IE ( object-fit) or older browsers, other solutions do not scale up the images (only shrink it), many solution do not support resize of the window and many are not generic, either expect fix resolution or layout(portrait or landscape)
If using javascript and jquery is not a problem I have this solution based on the code of #Tatu Ulmanen. I fixed some issues, and added some code in case the image is loaded dinamically and not available at begining. Basically the idea is to have two different css rules and apply them when required: one when the limitation is the height, so we need to show black bars at the sides, and othe css rule when the limitation is the width, so we need to show black bars at the top/bottom.
function applyResizeCSS(){
var $i = $('img#imageToResize');
var $c = $i.parent();
var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();
if(i_ar > c_ar){
$i.css( "width","100%");
$i.css( "height","auto");
}else{
$i.css( "height","100%");
$i.css( "width","auto");
}
}
var Oriwidth,Oriheight;
$(function() {
$(window).resize(function() {
applyResizeCSS();
});
$("#slide").load(function(){
Oriwidth = this.width,
Oriheight = this.height;
applyResizeCSS();
});
$(window).resize();
});
For an HTML element like:
<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>
try this
HTML:
<div class="container"></div>
CSS:
.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}