I am trying to create responsive circle which fit on every screen size like this:
I tried some codes from but anyone not work properly according to requirement.
You should do it with SVG or 2x res PNG. It will be approximately the same size regarding bandwith but you'll get a better control and much faster render.
Try something like this:
<div class="container">
<div class="circle">
<img class="image" src="http://lorempixel.com/800/800/">
</div>
</div>
.container {
width: 100%;
background: #000;
}
.circle {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
background: #fff;
position:relative;
overflow:hidden;
z-index:2;
}
.image {
z-index:1;
position:absolute;
top:0;
left:0;
width:auto;
max-width:100%;
height:auto;
max-height:100%;
}
The circle should fit the container..
see on fiddle: http://jsfiddle.net/jimmynewbs/doan8b2f/
You can then create a div inside this for the text / image and set the image to a maximum width of 100% and width auto. this will make sure it doesn't get bigger than the circle. Positioning the image absolute can help keep it within the circle too if you wanted to make it expand out to the edges...
Related
I want to show list thumbnail box as data grid. each thumbnail image has to be placed in frame with specific width and height (for consistency) as follow:
<div class='frame'>
<img src='img1.jpg' />
</div>
<div class='frame'>
<img src='img2.jpg' />
</div>
By setting image width and height to frame, images change to wrong aspect ratio and for smaller size image than frame, they are stretched to frame (I don't want to effect smaller size image). How can I fit image within frame without effecting aspect ratio of image. my next question is how can I set image to center of frame whatever the size is. should I do this with javascript? Please help me
Without JS, you can use max-width/max-height to keep the images in the boundaries of the .frame elements. With width:auto; and height:auto the images will keep their original aspect ratio and won't be stretched over their original size.
To center the images horizontaly and verticaly in the frames, you can use :
position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
DEMO
Full CSS :
.frame{
width:300px; height:300px;
display:inline-block;
border:1px solid teal;
position:relative;
}
.frame > img{
max-width:100%; max-height:100%;
width:auto; height:auto;
position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
}
you cannot fit both width and height in frame to maintain aspect ratio. you can set either max-width or max-height value of image to 100% to fit in frame. try my code. I am using this method in my projects. I use wrap and inner to get border and padding in frame.
no javascript is needed for fitting image. but you have to use to center your image in frame as width and height of individual image are dynamic value. my sample set image's max-width to fit in frame.
HTML:
<div class='wrap'>
<div class='inner'>
<img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
</div>
</div>
CSS:
.wrap{
padding:10px;
border: 1px solid #777;
width: 150px;
height: 100px;
overflow:hidden;
float:left;
margin: 0px 20px 20px 0px;
}
.inner{
width: 100%;
height: 100%;
overflow:hidden;
text-align:center;
position:relative;
}
.inner img{
max-width: 100%;
position:absolute;
left:0;top:0;
}
Javascript:
$("img").each(function(){
var top_dif= ($(this).height()-$(this).parent().height())/2;
var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});
have a look my samples:
debug http://jsfiddle.net/7LLh14wL/3/ (overflow:visible)
final http://jsfiddle.net/7LLh14wL/4/ (overflow:hidden)
You should set only the width or height and not both, it will keep the ratio.
Using max-width and max-height will help for the smaller images.
However, you will need JS to center the larger images.
use this snippet
JS
$(".frame").each( function(){
var imageUrl = $(this).find('img').attr("src");;
$(this).css('background-image', 'url(' + imageUrl + ')');
$(this).find('img').css("visiblity","hidden");
});
Css
.frame{
background-size:cover;
background-position:50% 50%;
}
I have an image that I want to resize when the width of the page/screen changes.
This code almost does what I want:
.section
{
position:relative;
min-width:600px;
max-width:1200px;
height:auto;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.image
{
position:relative;
display:inline-block;
vertical-align:top;
width:100%;
height:auto;
}
<div class="section">
<img src="long_img.jpg" class="image"/>
</div>
The problem is, the image is 2560px wide, and the section is only 1200px. The image gets squashed horizontally to fit, which scales the height down. But, when the page is at it's max width(1200) I want the image to be at full height(400). So I need the image to hang over the edge, but still automatically resize.
The reason I don't just crop the image is because I want to scroll it with a css animation.
I've tried .image{ margin-right:-1360; } but it had no effect.
Use a media query after the css that you have there. This will remove the 100% declaration and let the image be it's natural size.
#media(min-width:1200px) {
.section img {
width: auto;
display: block;
}
}
Also, take away the overflow:hidden from the containing div.
See this fiddle for an example.
Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the width="50px" and height="100px".
ok if I do
.myImage{
width:50px;
height:100px;
}
then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have width:50px then if the height>100px, then CSS will trim off the bottom.
Ok, let see this example, user inserted a big image with width=150px and height=600px. So if I reduce the width to 50px, the the height will be 200px. I want to cut the bottom of the image so it will show only (w: 50px, h: 100px) see the picture:
So how to do that?
1) Trim image with <div> and overflow:hidden:
div.trim {
max-height:100px;
max-width: 50px;
overflow: hidden;
}
<div class="trim"><img src="veryBigImage.png"/></div>
2) Use max-width: 50px; and max-height: 100px for image itself. So image will preserve it's dimensions
I would suggest using the CSS CLIP property to trim it to the size you want.
img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}
That way, if the image is small enough, nothing will get cut off. Otherwise, you trim it down.
You could wrap the img with a div and apply overflow: hidden;
HTML:
<div class="img-wrapper">
<img src="path/to/image.jpg" />
</div>
CSS:
.img-wrapper{
max-height: 100px;
overflow: hidden;
}
.img-wrapper img{
width: 50px;
}
By using max-width and max-height you can set height to whatever you want and the full image will display.
.myImage{
height:auto;
width:auto;
max-width:300px;
max-height:300px;
}
You need to put the image in a container of the desired trim size with overflow:hidden
html:
<div id="container"><img src="myimage.jpg"/></div>
css:
#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}
Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.
I cropped an image in html & css . When i am coding a <span> tag the cropped image displayed. But I need to know how can I modify it.
I have the following code:
<style type="text/css">
.design {
padding-left:25px;
background:url('Flings.png') no-repeat top left;
display: inline-block;
height: 17px;
width: 0px;
margin-left: 550px;
}
</style>
<div style="height: 200px;">
<span class="design" style='font-size: 40px;'></span>
</div>
When I am using the span tag, the cropped image displayed. But I want to modify it.
Example:
<span class="desgin" style='color: red;'></span></h3>
I want to color the image itself and change it's size and I am little stuck here.
Hope you understood me well, I will be glad for any help.
Thanks!
So you want to scale and then colorise the image? You can scale the image using background-size but this isn't very well supported. CSS3 filters unfortunately don't have a colorize filter also.
You should do this using an <img> so scaling works without background-size and then use another transparent element on top of the image to provide the tint effect. Unfortunately <img> tags don't support pseudo-elements so need to use a wrapper.
jsFiddle
HTML
<div class="red-tint">
<img src="https://www.google.com.au/images/srpr/logo4w.png" />
</div>
CSS
img {
/* scale the image */
width:200px;
height:auto;
}
.red-tint {
position:relative;
display:inline-block;
}
.red-tint:after {
background: rgba(255, 0, 0, 0.5);
display:block;
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
}
Update
Ah you want to crop, then that's just a matter of using background-position. You will need to give negative left and top positions to background-position which represent the offsets from the top-left corner of the image. For example, this will draw a 200x100 chunk of the image which is 100px in from the left side of the image and 20 px down from the top.
jsFiddle
.design {
width:200px;
height:100px;
background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat;
background-position:-100px -20px;
}