I am trying to make a banner for a webpage. I wanted create a container that only look up 20% of the page height-wise and then the image within it would take up 100% on the container. However, the image just ends up taking up all of the page and not responding to % changes.
Html code:
<div class="banner">
<img src="img/header.jpg">
</div>
CSS code:
.banner {
width: 100%;
height: 20%;
}
.banner img {
height : 100%;
width: 100%;
}
if you dont want to use a floating banner, you might consider to change your styling as this:
.banner {
width: 100%;
height: 20vh;
}
vh = view height. https://www.w3schools.com/cssref/css_units.asp.
and if you want floating banner to follow as your page scroll, use this:
.banner {
width: 100%;
height: 20vh;
position:fixed;
}
You can use vh instead of percentage for banner. 1vh = 1%
.banner {
width: 100%;
height: 20vh;
}
.banner img {
height : 100%;
width: 100%;
}
<div class="banner">
<img src="http://via.placeholder.com/350x150">
</div>
Instead of using the <img> tag you can set the image as the background of your container.
.banner{
background-image: url("/img/header.jpg");
}
Your .banner is not taking the height 20% from css. The reason is it does not have a parent element having height set. So here I have added height: 100% to html and body. Try the below example.
html,body{
height: 100%;
}
.banner {
width: 100%;
height: 20%;
background: green;
font-size: 0;
}
.banner img {
height : 100%;
width: 100%;
}
<div class="banner">
<img src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg">
</div>
Related
I'm trying to get an image to replace another image but not stretch, where the background size could be cover. In the demo I've build, the real image is one of an elephant, but I've replaced it with one of a lion via CSS only - I'm not allowed to change the HTML to achieve this.
But it's stretched. Adding background-size: cover does nothing. Is there any way of making the lion image not stretched that doesn't change the height of the div or image but instead does it via something like background-size: cover or similar? Thanks for any help here.
div {
width: 300px;
height: 400px;
background: lightgreen;
}
img {
width: 100%;
height: 400px;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}
<div>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>
You can use object-fit: cover.
div {
width: 300px;
height: 400px;
background: lightgreen;
}
img {
width: 100%;
height: 400px;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
object-fit: cover;
}
<div>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>
Have you tried using % instead of px?
And also, I would add a margin: 0; to the body. That would get rid of the white spaces around the image.
div {
width: 100%;
height: 100%;
background: lightgreen;
}
img {
width: 100%;
height: 100%;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}
body {
margin: 0;
}
<div>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>
My apple-pie-icons image in CSS is not responding to any height attribute. It responds to width, but not height.
Could I be including it in the wrong div?
I've tried using pixels and height percentages - no response.
What am I doing wrong?
HTML
`<div class="container">
<div>
<div>
<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">
<h1>Apple Pie</h1>
</div>
<div id="description-container">
<div id="Apple-pies">
This was my grandmother's apple pie recipe. I have never seen another one
quite like it. It will always be my favorite and has won me several first place
prizes in local competitions. I hope it becomes one of your favorites as well!
</div>
<div class="apple-pie-icons">
<img src="images/recipe-info.png">
</div>
</div>
</div>
`
CSS
* {
font-family: Arial, Verdana, monospace;
}
.container {
width: 80%;
}
img {
position: relative;
width: 100%;
height: 500px;
}
h1 {
position: absolute;
top: 175px;
color: white;
width: 100%;
left: 32%;
font-size: 300%;
}
#description-container{
width: 650px;
height: 800px;
margin: 50px 200px 0px 200px;
}
#Apple-pies {
}
.apple-pie-icons{
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
The icon is an image, and your CSS is defined as
img {
position: relative;
width: 100%;
height: 500px;
}
If you want to change the height, you can either change the height attribute there, or give the image a class and change the height that way (change the image tag to <img class="apple-pie-image" src="images/recipe-info.png"> and style via .apple-pie-icons .apple-pie-image { height: 1000px; }), or set the height of the image itself to 100% and then change the height of the parent, which is .apple-pie-icons in this case.
You also have this image (<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">) which has an inlinewidth and height style in the tag. It's worth noting that this image will not respond to height or width styles defined in your CSS since the inline styling will overwrite any other CSS.
It's possible that your image is growing the div even though you don't want it to in order to maintain it's aspect ratio. Try adding a more specific class to limit the images size or inspect in your browser to see what is overriding the divs styles.
Try targeting the image itself with the height style.
Right now you're just setting a height to the wrapping div:
.apple-pie-icons {
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
Try...
.apple-pie-icons img {
height: 100px;
max-width: 100%;
}
or something like
.apple-pie-icons img {
height: 100%;
width: auto;
}
Any way to specifically target the image within the div that you're wanting to style.
I have done this many times before but it doesn't seem to work now for whatever reason. I want the image to be the full the width of the container but it doesn't. Any ideas?
jsFiddle: http://jsfiddle.net/Lqffk1ak/
Code:
img {
max-width: 100%;
max-height: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just add width:100% to img
img {
width:100%
}
Looking at your class, what you should add is some CSS on the full-width class to make the img width 100%.
This way, only the images set as "full-width" will be forced 100%. The other one will keep the max-width rule of 100%, but won't be resized if they are smaller.
img {
max-width: 100%;
max-height: 100%;
}
.full-width {
width: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just make your image width 100%. Even you resize your container image will fit on it.
img{
width:100%;
}
You can check the updated fiddle here
Change the css :
div {
height: 100%;
}
img {
width: 100%;
min-height: 100%;
}
I know this isn't directly an answer to your question but generally speaking, upscaled images look quite nasty. A way people get past this is to have the image centered and then add a blurred version behind it.
Like this:
body {
margin: 0;
}
.image {
position: relative;
text-align: center;
overflow: hidden;
font-size: 0px;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg');
background-size: cover;
z-index: -1;
}
.blur {
filter: blur(10px);
}
<div class="image">
<div class="background-image blur"></div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
I hope you find this helpful.
Because your Image is has 600px; height, and the you have set max-width:100%. So max-width property will only work when the parent dive will be smaller then 600px;.
To make image to the containing div, you have to give set image's property 100%; that is .full-width {width: 100%;}
i'm working on a page in wordpress which shows 8 divs with some content.i want to show those all divs to 100% of window height in all devices and then when user click on the link next it shows another div one after another on clicking next, but somehow my divs are not going 100% in height.
Here is the css:
<style>
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
</style>
Here is the html:
<div class="container">
<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
</div>
Here is the link for my dummy page:
http://enablersinvestment.com/backend/how-it-works-scroll/
You just need to set .content min-height to be 100vh as follows:
.content {
margin: auto;
min-height: 100vh;
}
checkout this demo: http://jsbin.com/xayaku/1/
You need to set the height of .container to 100% as well:
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
Your problem here is that your content is inside the container and container does not have height: 100%.
Add the following rule to your css and you should be fine.
.container {
min-height: 100%;
}
If im correct The child adepts the percentage height to the height of the parent.
And in your case the child is content en the parent is container. You should give container a height of 100%.
.container {
min-height: 100%;
}
Do correct me if im wrong
To get divs to fill the whole webpage, you must add this line:
position: absolute;
For example:
div.content {
position: absolute;
height: 100%;
}
Without that line, the '100%' will be considered as the size of what is inside the div.
I have an element with 100% height. If there are a lot of blocks, then they go beyond it.
jsfiddle example: http://jsfiddle.net/yPqKa/
How to fix it?
Thanks in advance.
CSS:
html, body {
height: 100%;
width: 100%;
}
.content-background {
background-color: #000;
height: 100%;
width: 100%;
}
.content {
background-color: #eee;
height: 50px;
width: 100%;
margin-top: 60px;
}
Set a min-height on the body :
html {
height: 100%;
width: 100%;
}
body{
min-height:100%;
}
DEMO
This will allow the body to adapt it's height to the overflowing content.
The problem is that you have set the height of the html and body elements to 100% of their container, which restricts them to be smaller than the elements they contain. If you remove the height: 100%; from the second line, it will work.