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
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'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
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;
}
Trying to make it so images will resize themselves to fit in a square container.
I want to make it so no matter the size of an image, it will resize itself to fit the container, but keep its aspect ratio.
Here is my HTML code so far:
<div id="product-details">
<div id="product-image-display">
<div>
<div>
<span><img src="img/product-images/IBANEZ-AW300ECE-DARK-VIOLIN-SUNBURST-02.JPG"></span>
</div>
</div>
</div>
</div>
And CSS:
div#product-details div#product-image-display {
position: relative;
width: 100%;
overflow: hidden;
}
div#product-image-display:before {
content: "";
display: block;
padding-top: 100%;
}
div#product-details div#product-image-display div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
div#product-details div#product-image-display div div {
display: table;
width: 100%;
height: 100%;
}
div#product-image-display div div span {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow: hidden;
}
div#product-details div#product-image-display div div span img {
height: 100%;
}
Here's what it's doing now:
image
I want the image to resize and keep its aspect ratio, no matter what size it is. I can't just do width: 100%, as images that are tall and thin will not resize height properly. And I can't do the opposite, because of a similar but opposite problem. I can't do if statements with CSS, can I? (if img width > img height, then img width: 100%, etc.) That's a logical way I could do this.
Is there any way to do this without javascript/purely CSS/HTML?
EDIT: Big question rephrase.
Using width: 100% is the easiest way.
Try:
div#product-details div#product-image-display div div span img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
How about putting your image as background instead of a <img src=...tag?
You could then use background-size: contain;in your css, like this:
HTML
<div id="product-details">
<div id="product-image-display">
<div>
<div>
<span style='background-image: url(http://placehold.it/20x75)'></span>
</div>
</div>
</div>
</div>
CSS
div#product-details div#product-image-display {
position: relative;
width: 100%;
overflow: hidden;
}
div#product-image-display:before {
content: "";
display: block;
padding-top: 100%;
}
div#product-details div#product-image-display div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
div#product-details div#product-image-display div div {
display: table;
width: 100%;
height: 100%;
}
div#product-image-display div div span {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow: hidden;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
div#product-details div#product-image-display div div span img {
height: auto;
width: auto;
}
Fiddle
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%;
}