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
Related
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;
}
I'm trying something that should be pretty easy but i can't figure out how to make it.
I have html source like this:
<div class="product">
<img src="product123.png" />
</div>`
And some css:
.product {
width: 460px;
height: 460px;
}
.product img {
margin: auto;
display: block;
}
My image is well horizontally-aligned but not vertically. I tried with some position: relative; / bottom: 0; feature but it didn't change anything...
Any idea guys ?
Thank you for your help !
PS: I found this solution center <IMG/> inside a <DIV> with CSS but I'd rather prefer keeping my HTML like this and it seems like unbelievable to not be able to do it "my" way.
Try this - http://jsfiddle.net/tG9UK/
.product {
width: 460px;
height: 460px;
display: table-cell;
vertical-align: middle;
}
If you want to center both vertically and horizontally, you should be able to apply display: table-cell to the div and use vertical-align
.product {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 460px;
height: 460px;
}
.product img {
margin: auto;
display: block;
}
.product {
width: 460px;
height: 460px;
line-height:460px;
text-align:center;
}
http://jsfiddle.net/EHTeL/1/
If the image dimensions are static then something like this would work for you
.product img {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px; /* Half the height */
margin-left: -150px; /* Half the width */
}
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%;
}
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
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