Im sure this is really easy but i have been looking at this issue for a little while and my brain has gone blank. I have a div that then has an image inside of it. The image seems to just overflow the div border and its driving me mad. I have an image below to show you what is happening along with the css.
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
width: 100%;
height: auto;
}
<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>
I have a border on the main div #avatar just so i can see the whole size of the div. All i want is for the image to scale to the size of the div. If i set the height to 100% it goes into the div just fine but when resizing it it starts to overflow the div. I want the image to resize on the width not height.
Am i missing something really simple here? I dont want to use overflow hidden on the image as that will just cut some of it off i believe.
Thanks everyone
Try below css for img.
use height: 100%; for maximum height
display: block;margin: auto; for centering
max-width: 100%; to fit large images
Please check the example with large and small images.
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
height: 100%;
max-width: 100%;
display: block;
margin: auto;
}
<div id="avatar">
<img src="http://www.baraodasfestas.com.br/Assets/Produtos/SuperZoom/0431_MICKEY_635703672330071491.jpg" alt="">
</div>
<div id="avatar">
<img src="https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png" alt="">
</div>
Just add:
#avatar img {
max-width: 100%;
}
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
/*width: 100%;*/
height: auto;
max-width: 100%;
height:100%;
}
<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>
It's because of your height:auto for the <img>
Just use :
#avatar img
{
width: 100%;
height: 100%;
}
But this will stretch you image. So if you want full size image inside your container you need to stretch your container instead. Like
#avatar
{
float: left;
display: inline-block;
width: 50%;
height: auto;
border: 1px solid black;
}
#avatar img
{
width: 100%;
height: 100%;
}
Related
I have an image inside a flexible div and I want the image to stay the same size no matter if the div is being resized, the image should just be hidden (centering it would also be a great add-on). How to achieve this?
Below is my current code, this causes the image to shrink when the div is being resized. Thank you!
.banner-img {
max-width: 30%;
float: left;
overflow: hidden;
border: 1px solid red;
}
.banner-img img {
width: 250px;
height: 100px;
}
<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>
Flex is a good solution to center your image
.banner-img {
max-width: 30%;
height: auto;
overflow: hidden;
display: flex;
justify-content: center;
border: 1px solid red;
}
.banner-img img {
width: 250px;
height: auto;
}
<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>
You can achive this with making an image as background and align the background position to center:
.banner-img {
width: 250px;
max-width: 30%;
height: 100px;
background: url("http://via.placeholder.com/250x100") center no-repeat;
}
<div class="banner-img"></div>
In .banner-img img, you can add object-fit: cover and change the width: 250px from pixels to percentage, like this:
.banner-img {
max-width:30%;
float:left;
overflow:hidden;
}
.banner-img img {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>
I have a div on which I defined following CSS rules
<style>
.image-preview {
height: 600px;
width: 50%;
border: 1px solid red;
}
.image {
width: auto;
height: 600px;
}
</style>
<div class="image-preview">
<img src="abc.jpg" class="image">
</div>
Suppose if width:50% is 300px and abc.jpg is of 500px it comes out of the div. I want to keep the image in the div as center aligned and with maintaining the aspect ration of it.
I have given the width:auto but this is not working. I have not much experience with CSS so please ignore if this is too basic to ask.
Thanks!!
You could use display flex to center your image with this you make sure that the images always maintains its aspect ratio...
.image-preview {
height: 600px;
width: 50%;
border: 1px solid red;
display:flex;
align-items:center;
justify-content:center;
}
.image {
max-width:100%;
max-height:100%;
}
<div class="image-preview">
<img src="http://via.placeholder.com/500x150" class="image">
</div>
Try to use flexbox, which is probably the best tool to align items in divs. You can find out more about it here: https://www.w3schools.com/csS/css3_flexbox.asp.
.image-preview {
height: 600px;
width: 600px; /*whatever you want*/
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.image {
height: 400px; /*Any value would still keep it vertically centered thanks to the align-items property*/
width: auto;
}
<div class="image-preview">
<img src="https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937%21Example.jpg" class="image">
</div>
The justify-content property handles the horizontal alignment, and the align-items property handles the vertical alignment.
So, image is a inline element:
img {
display: block;
margin: 0 auto; //this is center your image
height: auto; // this will make it ration
max-width: 1200px; //or whatever is the size of your image
}
This will make your image full responsive, centered and ration.
.image-preview {
border: 1px solid red;
box-sizing: border-box;
height: 600px;
padding: 10px;
text-align: center;
width: 50%;
}
.image {
width: auto;
height: 100%;
max-width:100%;
}
<div class="image-preview">
<img src="https://placeimg.com/300/600/any" class="image">
</div>
You can do it by setting height 100%; width:auto to image.
I'm trying to get my logo to become responsive.
Here's a fiddle, and the logo there IS responsive, but on my local machine it's not responsive...
https://jsfiddle.net/jfzqbshs/
Here's a GIF showing my local machine
GIF
HTML
<div class="header">
<img id="logo" src="assets/logo.png">
</div> <!--/ header -->
CSS
.header{
width:100%;
box-sizing: border-box;
padding-left: 1%;
padding-top:1%;
padding-bottom: 1%;
border-bottom: 1px solid #474547;
}
#logo {
display: block;
max-width: 100%;
height: auto;
}
Thank you.
Your image is rather small, so it will never reach the 100% width if you use max-width.
You can use something like this:
#logo {
width: 25%;
min-width: 100px;
height: auto;
}
That makes it responsible (25% width), but also limits it so it never gets smaller than 100px width. You could also add a max-width (in pixels) to avoid that it gets bigger than it actually is (which would result in a blurry image at bad quality)
.header {
width: 100%;
box-sizing: border-box;
padding-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
border-bottom: 1px solid #474547;
}
#logo {
width: 25%;
min-width: 100px;
height: auto;
}
<div class="header">
<img id="logo" src="http://placehold.it/200x60/eb7">
</div>
<!--/ header -->
Do You use bootstrap or other CSS library? Maybe Your img is overwritten somewhere in Your code?. Try this to check:
.header img {
display: block;
max-width: 100%;
height: auto;
}
or even:
img {
display: block;
max-width: 100%;
height: auto;
}
and put in on bottom of CSS file.
Here's my fiddle
Here's my HTML:
<div class="block">
<h2>Title</h2>
<img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" />
</div>
I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken in to consideration and the height overflows the block.
Try display:table
.block{
display: table;
}
.block{
width: 30%;
height: 100px;
display: table;
background: pink;
}
img{
height: 100%;
max-width: 100%;
}
<div class="block">
<h2>Title</h2>
<img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" />
</div>
One possibility that gives just one constant-pixel value (repeated once):
.block h2 {
height: 30px;
}
.block img {
height: calc(100% - 30px);
}
margin-top:-18px
You can also try just moving the image
Check the fiddle
What are you trying to do?
If you want do image background - use background-image and fit it
Anyway you can do something like this:
.block{
width: 30%;
height: 100px;
display: block;
background: pink;
position: relative;
}
img{
height: 100%;
max-width: 100%;
}
h2{
position: absolute;
top: 10px;
left: 100px;
}
https://jsfiddle.net/fe11zyh9/1/
Is it a possibility to set the height of the IMG in px?
So:
img{
height: 100px;
max-width: 100%;
}
Out put
Original Image size : 463px X 339px
I have removed the image due to copy right issues.
HTML
<div class="col-md-4">
<div class="item-block event-details" id="video-container">
<img src="/Resources/images/6b0c5d49-9a76-4a09-afb7-5bfa2ed508f7.jpg" class="img-responsive">
</div>
CSS
.item-block.event-details {
position: relative;
overflow: hidden;
height: 214px;
}
.item-block {
color: #4b4e4e;
border-radius: 4px;
border: 1px solid #d4d4d4;
box-shadow: 0px 1px 1px #b0b6b6;
position: relative;
margin-bottom: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Question :
Can you tell me why this is happening ? I need to show the whole image on above parent div sizes.But it's not happening.Can you tell me why ?
In other words,image does not fit into the parent div.
If your parent div needs to be that height for some reason, you could set both max-width and max-height to 100%
.img-responsive {
display: block;
margin: 0 auto; /* to center the image horizontally in parent div */
max-width: 100%;
max-height: 100%;
}
I think you should do the opposite in your .img-responsive css class. Let's try that :
.img-responsive {
display: block;
width: 100%;
max-height: auto;
}
Don't need to write
max-width:100%;
If you want image responsive you can write
.img-responsive {
display: block;
width: 100%;
max-height: 100%;
}
if you are using bootstrap then forget about all. you just add the class .img-responsive to img tag.
Demo