I want to fit an image inside some divs and make it as big as possible without changing the aspect ratio. Setting max-height and max-width to 100% on both the image and its parent does not work and the image overflows (I guess because the parent does not really have a width or height so the image can not resize to it?).
JSFiddle
<div class="block">
<div class="row">
<div class="col-xs-9">
<div class="thumbnail">
<img class="placeholder" src="https://unsplash.it/900/600" alt="">
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
Edit:
I will clarify what I really want to achieve later this evening when I have time to write.
Set the the image as background image to .thumbnail, and constrict it's size using background-size (demo):
.thumbnail {
display: inline-block;
margin: 0;
height: 100%;
width: 100%;
background: url("https://unsplash.it/900/600") no-repeat;
background-size: contain;
}
If you want the parent div to match its content, add display:table; in your "outline-block" css class.
Fiddle
Similar post on stack overflow: how-do-i-auto-resize-an-image-to-fit-a-div-container
Related
So when I try to define the background-image for the below html:
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
like so in css:
#generalButton{
background-image:url(files/gss.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
}
nothing shows up.
However, if I keep the css the same and add an image to the html like so:
<div class="generalVideo">
<div id='generalButton'> <img src="files/gss.png" alt="">
</div>
</div>
So you can see the two images overlapping on each other in different positions. If I deleted the background-image from the css, the img in the html also disappears. Why is this happening?
In the first instance there are no dimensions for the background-image to take up so nothing shows.
In the second instance the img is an element within the HTML and in the absence of any other styling it shows at its 'natural' dimensions.
Also, by default, the parent div will take on width and height: auto so essentially the img gives it some width and height. So the background-image also has some dimensions to work with and can be set up at 70% as required.
To get just a background image to show you need to tell the system a width and height. This snippet gives it a square in terms of vmin units:
#generalButton {
background-image: url(https://picsum.photos/id/1015/200/300);
background-position: center center;
background-repeat: no-repeat;
background-size: 70%;
background-color: pink;
width: 50vmin;
height: 50vmin;
}
<p> background-image only, no img element: </p>
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
Note: the div has been given a background color too so it's size is obvious.
They overlap because the background-image is centered and the img-tag is not.
You need to set a width and height on the div if you only want to use the div.
#generalButton {
background-image:url(https://picsum.photos/200);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
height: 200px;
width: 200px;
}
<div class="generalVideo">
<div id='generalButton'>
<img src="https://picsum.photos/150" alt="">
</div>
</div>
I am new to bootstrap so I don't exactly know how it works !
What I want to do is to make the 3 images shown in the screen shot of same size.
Their resolutions are different .
This is the html for each image
<div class="col-sm-2 ">
<div> <img src="img/test.jpg"> </div>
<div > <h3>Text Here</h3> </div>
</div>
This is the screen shot
add class="img-responsive" to your img and for the same size display you can add some custome class such as my_img and set the size there:
my_img{
height: 200px
width: 150px
}
or set a default height to the parent. Than you can do width: 100%; height: 100%
So what you know have is a column. That sets the width. than you have a div which has no class yet. You can add style to that div or to the img directly.
The column is responsive by default so just give the img a width: 100%; (it will scale to parent element) and that div will scale to its parent element as well which is col-sm-2.
I have an image tag like
<img />
I then dynamically download a link to an image, and I set the image src to that link. I do not know the dimensions of the image in the link. Is there a CSS code I can use to make sure the width of the image is exactly 200px (no crop, just stretch to fit) and the height of the image is the same as on the original image? (so basically just a horizontal scale when original dimensions are not known). Whatever I try, it seems to preserve the aspect ratio.
Thanks
Here's an example: I am dynamically loading this image:
I don't know its dimensions, But in the end, I want it to look like (pretend its width is 200px).
This is what you are looking for.
function formatImage(t)
{
//var t = document.getElementById("idOfImg");
alert(t.naturalWidth + " " + t.naturalHeight);
t.height = t.naturalHeight;
t.width = "200";
}
On every image that you want this behavior add onload=formatImage(this);
JSFiddle
https://jsfiddle.net/94rzcLh6/
Lmk if it works. I have not used proper naming on fiddle kindly ignore that.
how about this:
css:
.content{
display:table;
}
.thumb{
width:200px;
height:100%;
display:table-cell;
vertical-align:top;
}
.thumb .in, .thumb .in img{
width:100%;
height:100%;
}
html:
<div class="content">
<div class="thumb">
<div class="in">
<img src="http://www.planwallpaper.com/static/cache/7b/30/7b306aff620b08d0eefdb6b37f57abc8.jpg" />
</div>
</div>
<div class="thumb">
<div class="in">
<img src="http://www.planwallpaper.com/static/cache/a6/4f/a64ffdfc06a8bea4ed2e62f2a44b063d.jpg" />
</div>
</div>
<div class="thumb">
<div class="in">
<img src="http://www.gettyimages.es/gi-resources/images/RoyaltyFree/113198687.jpg" />
</div>
</div>
</div>
jsfiddle
In the jsfidle sample I check the height and this preserve it.Taking from 2 browsers.The same is for other images.
You need to wrap your image in a container that can help you preserve the 200px constrain you want to apply on your image. The height will adapt to the width which is neat since you won`t have to worry about it.
The below example shows what you can do with a custom size image, from placeholdit, you can modify it as you like. I also advise you to play around with the .wrapper width in order to identify any changes you wish to apply such as adding width: 200px; width: auto; instead... this .wrapper is a very flexible container and that is what you need, you can change it however you like.
EDIT
Going by the comments below, I decided to modify the wrapper of the image to force the image to lose it's aspect ratio. First, I am using a position: absolute (you can also use position: fixed). I also made the image dimensions completely disproportionate to the .wrapper dimensions, to further elaborate on the necessity of losing aspect ratio.
Note: Since it is only a demonstration, I am not worrying about multiple images and how to position them properly (that is another question entirely).
.wrapper {
width: 200px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.wrapper img {
width: 100%;
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1500x1000" alt="some image">
</div>
Feel free to play around with the .wrapper to
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
I am new to Bootstrap, responsive web design, and am trying to create a page for my band but I am running into a few issues. I will try to explain as best as I can my situation and I greatly appreciate any and all help...
I have a div that has a background image of the band and I need it centered in the screen (regardless of the size of the screen) inside of one of Bootstrap's container DIV's. On top of that image, I have another image that I want to include. I am able to get that result so far. The problem I am running into is when I try to position the child DIV inside of the parent DIV. I have tried to set the parent DIV with a position: relative and the child DIV with a position: absolute, but as I begin to resize the screen, the inside image suddenly enlargens and stretches outside of the parent DIV. Also, when using this method and trying to position the child DIV 75% from the top of the parent DIV by using top: 75%;, it makes the image jump out of the parent again and puts it down at the bottom of the screen.
Here is the code that I have used so far but cannot get to work. Again, any help at all would be greatly appreciated as I am new to Bootstrap and responsive design but I would love to figure this stuff out. Thanks in advance!
MY HTML:
<div class="container">
<div class="row">
<div class="col-md-12 bandphoto">
<div class="row">
<div class="col-md-6 col-md-offset-3 theband-title">
<img src="images/theband.png" class="img-responsive ">
</div>
</div>
</div>
</div>
MY CSS:
.bandphoto {
position: relative;
max-width: 2000px;
min-height: 999px;
background: url(images/bandphoto.png);
background-size: 100%;
background-repeat: no-repeat;
}
.theband-title {
position: absolute;
top: 75%;
}
http://jsfiddle.net/isherwood/w3mgQ
Am I doing something wrong here? If so, please advise with and feel free to educate me as well so that I can better understand this stuff.
I think you want to avoid using absolute positioning (because it's very difficult to keep centered), and don't try to force Bootstrap elements when they're not needed. It's not clear to me how you want to position the inner image because I have no size reference, but maybe this gets you closer:
http://jsfiddle.net/isherwood/w3mgQ/3/
.bandphoto {
position: relative;
max-width: 2000px;
min-height: 999px;
background: url(http://placehold.it/600x600/333333);
background-size: 100%;
background-repeat: no-repeat;
}
.theband-title {
margin: 0 auto 0;
}
<div class="container">
<div class="row">
<div class="col-md-12 bandphoto">
<img src="http://placehold.it/500x500" class="theband-title img-responsive" />
</div>
</div>
</div>
I believe what you're looking for is display:table and his friends. Here's a JSFiddle demonstrating:
http://jsfiddle.net/VcFf9/4/
I've set the container to be 100% height, and then vertically aligned the background and the content of the cell. Bootstrap's grid lends itself quite well to display:table, so try it out! :D