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%;
}
Related
Need the image to fill up the rest of the space in the .container class
I have tried setting the width of the image in CSS to width: 100%, but it gives me this:
Picture 1: https://ibb.co/9yKJgvF
If I remove that attribute, it gives me this:
Picture 2: https://ibb.co/K0HpkvJ
HTML
<header>
<div class="container">
<div id="logo_container">
<h1>Hotel<span>Inn</span></h1>
</div>
<img src="../images/sample1.jpg" alt="Image of Hotel">
</div>
</header>
CSS
header{
width: 100%;
height: 100px;
display: block;
background-color: lightblue;
}
.container{
width: 80%;
height: 100%;
display: block;
margin: 0 auto;
background-color: white;
}
#logo_container{
height: 100%;
display: table;
float: left;
}
#logo_container h1{
display: table-cell;
vertical-align: middle;
}
.container img{
height: 100%;
float: right;
I trying to make it such that the height of the image is the same as that in Picture 2 while the image will fill up the rest of the space until it touches the words 'HotelInn'
first of all dont use float for this purpose use absolute layout
remove float in .img
In .container add
position: relative;
z-index: 0;
In .img add
position: absolute;
width: 100%;
height: 100%;
right: 0;
z-index: 0;
this will strech out the image I suggest to use image according to it.....
if you want to strech out the image with perfect ratio use height : auto
and add overflow : hidden in .container
I have the following structure:
<div class="top">
<button class="wrap">
<span class="text">Hello</span>
</button>
</div>
I have the following CSS:
.top{
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
I have seen several posts regarding the "span taking the entire width of their parent" and the most popular answer was to make it display: block;
But in this case, it doesn't work. If you inspect, you will see that the span is taking 200px width instead of 216px width (width of button).
How can I fix this problem? Here is the fiddle
There is padding in your .wrap class. Set padding to 0 on your .wrap, .text declaration.
.top {
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text {
padding: 0px; //set padding to 0px
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
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%;
}
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
I know when using 100% height the elements parents must have 100% height.
I want to make .overlay height: 100%; but I can't get it to work.
If I change .col to height: 100% it works but I don't want .col to be 100%.
http://jsfiddle.net/8HfjV/
Is there anyway around this? I noticed if I give an a tag display:block and height: 100%; that works. So is there a way to do it for a DIV?
HTML:
<div class="col col1">
<a href="#">
<div class="overlay"></div>
<img src="#">
</a>
</div>
CSS:
html, body {
height: 100%;
}
.col {
float: left;
display: block;
Position: relative;
}
.col a {
display: block;
height: 100%;
}
.col img {
width: 100%;
display: block;
height: auto;
}
.overlay {
height: 100%;
background: #000;
z-index: 1;
display: block;
}
.col1 {
width: 25%;
}
Since the class name is overlay I believe you want it to overlap the img?
If so use position: absolute;. Your div is set to height: 100%; but its width is 0 so change it to 100% as well.
Demo
You need to add position: relative to the <a /> and position: absolute; width:100%;height:100% to the .overly
here is the demo