I have an image inside a div, I am new to html/css, the image is following the proportions of the div it is inside, which is height*width (100%*50%). I realize I can make the image correct by adjusting its height, but that seems a bit forceful. Im using display flex tags. Could it be that?
html,body { height: 100%; margin: 0px; padding: 0px; }
#parent_div {
display: flex;
flex-direction: right;
height: 100%;
}
#child_div {
display: flex;
background-color: #F0A537;
width: 50%;
height: 100%;
}
#child_div2 {
display: flex;
background-color: #468966;
width: 50%;
height: 100%;
}
img {
height: 20%;
width: 20%;
}
You have set your image as height:20%. You need to change the 20% height to auto, that way the image will maintain its own proportions. then you set the width in either pixels or percentage to make it fit in your div.
Related
Im trying to make a vertical scroll on my .left class.
When i try to instert overflow-y: scroll, nothing happens.
I tried to set max-height on parent container, but its exceeds the div limits
I tried to set also overflow-y: scroll on .left divider.
Here is a reproduction.
Stackblitz:
https://stackblitz.com/edit/web-platform-49iyin?file=index.html
If you want to have a scroller inside that element, you need to have a fixed height for that parent element
.content {
height: 500px;
background: #ddd;
}
.wrapper {
max-width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.product-list {
display: flex;
margin-top: 24px;
}
.left {
height: 400px; /* Should have a fixed height here */
overflow: auto; /* Should be auto instead of `scroll` */
flex: 0.3;
background: #6200ff70;
}
.product {
display: flex;
height: 60px;
margin: 8px;
}
If you want to have a scroller for the entire area under content. You can set like this
.content {
height: 500px;
overflow: auto;
background: #ddd;
}
I need to center-align my main div image which I have working on wider screens. But when I reduce the width of the screen, the image always starts from the left and is cropped off at the right.
I need the image to be centered within screen size, even if it is too wide.
body {
background-color: grey;
overflow: hidden;
margin: 0px;
}
.vid {
height: 100vh;
display: block;
margin: auto;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
Instead of specifying the height, you should specify the width. Here is an example:
.vid {
width:90%;
display: block;
margin: auto;
}
body {
background-color: grey;
margin:0;
}
.vid {
width: 100vw;
margin-top:10vw;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
You may try to apply these styles to the img's parent:
body {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100vh;
}
img {
width: 100%;
height: 100%;
}
You can use object-fit lets you specify how the image should fit into the space:
.vid {
object-fit: cover; /* fill the whole container centring image if it doesn't fit */
height: 100vh;
width: 100%; /* object-fit needs to have a width set */
}
Using object-fit:cover will make the image fill (or "cover") the whole space, cropping off the left and right if it is too wide for the space so that it is centred.
Working Example - full cover
body {
background-color: grey;
overflow: hidden;
margin: 0px;
}
.vid {
object-fit:cover;
height: 100vh;
width: 100%;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
Working Example Setting a max height & width - you can also set a min/max height or width on the image too if you need to - these can be set to any specific value (e.g. 800px) or % (e.g. max-width:100%):
body {
background-color: grey;
overflow: hidden;
margin: 0px;
}
.vid {
object-fit:cover;
/* e.g. to limit the size of the image to its actual size */
max-width: 100%;
min-height: 500px; /* for example, but not required */
max-height: 100vh;
margin: auto;
display:block;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
Its better to use background image when you want to fill a div with a image(most of the time).I hope this this will help you resolve your issue.
body {
overflow: hidden;
margin: 0px;
}
.vid {
height: 100vh;
background-image: url('http://wizzfree.com/pix/testbg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class="vid" > </div>
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
Can't wrap my head around it! I try to make parent div to take no more than 80% height of the window with max-height, and child div to take all parent height minus something.
But height property in percents of the parent doesn't work for the child at all, unless I give parent height property.
Why is that?
Here is my simplified fiddle: https://jsfiddle.net/mbatcer/m2ohnsf5/
Why does inner div not respect parent height and go out of container?
HTML:
<div class="container">
<div class="inner">
<img src="http://via.placeholder.com/70x300">
</div>
</div>
CSS:
.container {
background: blue;
padding: 10px;
max-height: 100px;
}
.inner {
height: 100%;
width: 70px;
overflow: hidden;
}
I think this is what you are looking for:
.container {
background: blue;
padding: 10px;
max-height: 100px;
display: flex;
}
.inner {
width: 70px;
overflow: hidden;
}
Here is the fiddle: https://jsfiddle.net/f9sfczya/1/
Here I added display: flex; in your parent div and removed height: 100%;
from child div.
Unfortunately display: flex; is unsupported by IE9 and older.
Hope this may help you.
If you set child's max-height with a percentage, it will set the child's height according to the parent's real height instead of the max-height.
So you will need to set a height to your .container and set a max-height: 100% to your image since your image has lager height than width.
.container {
background: blue;
padding: 10px;
height: 100px;
}
.inner {
height: 100%;
overflow: hidden;
}
img {
max-height: 100%;
}
A better way to solve this problem is to use flex-box.
.container {
display: flex;
flex-flow: row;
background: blue;
padding: 10px;
max-height: 80vh;
}
.inner {
overflow: hidden;
}
img {
max-height: 100%;
}
Add height:80vh; to .container and it will work.
You should change your CSS like this-
.container {
background: blue;
padding: 10px;
}
.inner {
max-height: 100px;
width: 100% ;
overflow: hidden;
}
.inner img {
max-height: 100px;
}
I'm trying to vertical align a child div to the bottom of its parent div, and set it as a percentage of the parent's height.
However, the height: 20% property of the child seems to be getting ignored, and the div stretches to take up the entire 100%.
The end goal is to have a full-screen title page photo as an intro to an article, with a semi-opaque bar running along the bottom of the photo that will have the title of the article in it. I'm using percentages to make it a responsive design for any size screen.
JS Fiddle:
http://jsfiddle.net/A52fw/1/
HTML:
<body>
<div id="outerdiv">
<div id="innerdiv">
test
</div>
</div>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
display: table-cell;
vertical-align: bottom;
}
Use positioning (relative on the parent, absolute on the child) instead of the display property:
#outerdiv {
height: 100%;
width: 100%;
position:relative;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
position:absolute;
bottom:0;
}
jsFiddle example
You can do this without absolute positioning, since you know the height of the child.
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
margin-top: 80%;
}
In case your height is in pixels you can use:
#innerdiv {
width: 100%;
height: 40px;
margin-top: calc(100% - 40px);
}