How to auto re size my image, If I change my width and length to auto it won't able to display any image. My image will overlapping the text when I re-size my browser so, I would like to change my image size to dynamic.
HTML source
<div class="span2">
<ul class="nav user_menu pull-left">
<div class="round-pic1" style="background-image: url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');"></div>
</ul>
</div>
CSS
.round-pic1 {
display: block;
width: 170px;
height: 170px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
JSFiddle
http://jsfiddle.net/9JVHq/
I've been playing around with your fiddle a bit and have come up with a potential solution here - FIDDLE.
Make your picture square and put it in the code as an image.
Put the image in a div and give the div a min-width and max-width.
It allows the image to shrink down to 100px, keeping the same aspect ratio.
Let me know if that's what your looking for.
CSS
.holder {
min-width: 100px;
max-width: 300px;
}
HTML
<div class='holder'>
<img class="round-pic1" src='http://offsite2.seriousshops.com/53/11/11635/11635_main_400x400.jpg'/>
</div>
Using this one css to resize bg image:
jsfiddle.net/YCtDr/
background-size: 100% 100%;
MOre info
If you want to preserve aspect ratio, there are two more possibilities.
1. background-size: cover; - the background image is completely
covering the element (image can be cut off)
2.background-size: contain; - the image is streched without cutting it
Related
am making a card where i have the image and description below but the image is too zoomed and doesnt look attractive i've tried to adjust the height and image but it doesnt work
HTML
<div id="event-card">
<div id="card-image">
<img src="{{ URL::to('/assets/photos/event3.jpg') }}">
</div>
<div class="container" id="card-details">
{{$event->eventName}}
</div>
</div>
This is the CSS
#event-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
display: inline-block;
width:250px;
height:250px;
overflow: hidden;
margin-right:10px;
margin-bottom:10px;
border-radius: 8px;
margin-top:40px;
}
#card-image {
background-image:url('/churchill/public/assets/photos/event3.jpg');
height:60%;
width: 100%;
background-size:cover;
overflow:hidden;
background-repeat: no-repeat;
}
#event-cards{
width:80%;
margin-left:156px;
}
All well.. images.. biggest problem ever :D
Well you actually have few options.
I will be straightforward
img {
width: 100%;
height: 100%;
object-fit: cover;
}
This will make image look natural and not stretched but it might cut it on sides for that
img {
max-width: 100%;
height: auto;
}
This might be best solution for you. Image won't go over parent in width and it will go in height big enough to keep its aspect ratio and it will look natural. Play with it and see what looks best for you
PS: You also have
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: scale-down;
object-fit: none;
What is the original width and height of the image?
if the image height 500px and the width 500px and you set it width 500px and height 200px it will cause a problem like you facing, to avoid this issue you can set the image as a background you can create another div with the height and width you want and set this image as a background and you can control it using background-size:cover and background-position
How could I use img-responsive of bootstrap to a div as follows:
<div class="fill" style="background-image:url
('./images/abc.jpg');">
</div>
While I am trying to add img-responsive class inside the div along fill it doesn't work. How could I make the background image for the above div responsive?
div {
background-image:url('./images/abc.jpg');
background-repeat:no-repeat;
background-size:contain;
}
If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Look, there is a nice technique using background-size property
.fill {
background: url(path/to/img.jpg) center center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
This rule will make your background image cover all container space and adjust when scaling the window.
Use background-size property to the value of 100% auto to achieve what you are looking for.
For instance,
.fill{
background-size:100% auto;
}
I have the following CSS class.
.img {
background-size: cover;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
color: #fff;
height: 200px;
position: relative;
text-align: center;
width: 100%;
}
What I want to do is the make the height 400px proportionately. (make it responsive for mobile/tablet and desktop)
Currently if I make the height as 400px; The image stretches to right hand side. (in Mobile device screen)
this is how I use it in the code, as a background image
<div class="hero" style="background-image: url('<image path>');">
</div>
So how can I make this background image responsive
To create a ratio-box, you can use padding-top to define the height of the div based as a percentage of the width:
.img {
background-size: cover;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
color: #fff;
height: 75%;
position: relative;
text-align: center;
width: 100%;
}
This creates a 4:3 ratio for the image (which from your comment is what your image should be).
What you need to determine is the ratio of the image, so you can set the proper padding amount.
An important thing to know about using padding-top as a percentage: it refers to the width of the containing block. In your case it won't be an issue, since you're using 100% width anyways, but it's something to keep in mind.
Here is a simple example:
.wrap{
width:50%;
margin:0 auto;
}
.ratio-box{
width:100%;
padding-top:100%;
background:blue;
}
<div class="wrap">
<div class="ratio-box"></div>
<p>1:1 ratio box (resize browser for results)</p>
</div>
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
I am trying to rounding the sides of a background image with border-radius property.
Here is my scenario:
I placed a big image in a small division as background and put the overflow hidden. Now I need to round the small division. I successfully rounded the corner of small division. But the image's corner is not rounding.
HTML:
<div class="video_thumb">
<div style="background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg); " class="video-thumbnail"></div>
</div>
CSS
.video_thumb {
height: 250px;
width: 300px;
overflow:hidden;
margin:20px;
border: 1px solid red;
z-index:100;
position:relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.video-thumbnail {
width: 520px;
height: 100%;
position: relative;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
z-index:10;
overflow:hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Here is a demo using jsfiddle
You can see the top left and bottom left border are rounded. But top right and bottom right corner are not rounded. How can we make all the corners of image rounded?
I tried adding z-index, overflow: hidden to both divs, but no luck.
EDIT:
This problem is only with Google Chrome. Working fine on Firefox browser.
This appears to be a Chrome bug and you should consider raising it as such # http://code.google.com/p/chromium/issues/list
For now, you can "work around it" by changing position: relative to position: static
A Hacky Fix
As answered here, you can add a -webkit-mask-image to the parent element to hide the overflowing content:
.video_thumb {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Just Updated your Fiddle. Hope this will solve your problem.
DEMO
http://jsfiddle.net/saorabhkr/e94q3/13/
Removed fixed width from this class (.video-thumbnail) and put background-size in your markup where you are adding image/video.
You can try using this piece of code http://jsfiddle.net/shubhanshumishra/e94q3/10/ You don't need to set border radius for both the wrapping div and the div with image.
Here is the code:
.video-thumbnail{
background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg);;
width: 300px;
height: 250px;
border: 8px solid #666;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
You can use the background-position property to clip the area you want. Also you can use the background-size property to stretch your background image as you want.
Here is the link to the updated fiddle: http://jsfiddle.net/shubhanshumishra/e94q3/14/