I'm trying to adjust the height of a picture by a percentage, rather than a pixel. However, when I use height: 30%; it doesn't work, but height: 30px; does work. What am I doing wrong?
My snippet is mind boggingly easy.
.imagebanner {
height: 30%;
width: 100%;
}
<img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" />
If you use a percentage value for height, the parent element needs to have a defined height (for example 100%), and this goes up to the body and html, so as a start you can begin with adding
html, body { height: 100%; }
and also give height definitions to all the elements in between body and your image.
Update your browser and then try. Sometimes if you're using old browser. New features of HTML don't work in old browser.
You need to set a 100% height on the parent element.
.imagebanner {
height: 30%;
width: 100%;
background: red;
}
.wrapper {
height: 200px;
width: 200px;
background: grey;
}
<div class="wrapper">
<img src="http://christiancomputerrepair.com/wp-content/themes/christiancomputerrepair/images/home_computer.png" class="imagebanner">
</div>
Related
I try to stream my webcam, i want to get it in full width inside the div.
Somehow it's not working for me. I try to use % to make it responsive possible.
Here is a Fiddle
HTML
<div id="webcam">
<div class="webcam-stream">
<video src="blob:http://localhost/e814ab72-c414-4d97-9eca-b205c914fd6b" controls="" id="ME55u8ZS83mhoMloE2AE5OU9LrkDZdasaEfsKMO"></video>
</div>
</div>
<h3>
END RESULT
</h3>
<img src="https://cdn.pbrd.co/images/HPj7kAyuy.png">
CSS
#webcam {
height: 35%;
width: 40%;
}
.webcam-stream {
width: 100%;
height: 90%;
}
video {
height: 100%;
width: 100%;
}
in any case for responsive it should have bakground, for all screens all devices, or you will have distortion of video in full size mode.
or please read articles, and try to make
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
there is few way
1) make fixed container for wrapper, with top,left,bottom,right set to zero, and than for it child add absolute.
2) try with 100vw and 100vh, this can not work in some IE, and older browsers
I am not sure I understand your question 100% but to make it easier for you to see which styles need to change add different background colors to your views.
#webcam {
height: 35%;
width: 40%;
background-color: red;
}
.webcam-stream {
width: 100%;
height: 100%;
background-color: blue;
}
video {
height: 100%;
width: 100%;
background-color: green;
}
In this following example a changed the % values of the child elements to be 10% less to show you what I mean.
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'm not sure if this problem has been posted before, but I don't know how to ask this question effectively.
In my website I've created two large sections one after the other (not referring to the tag), one's height is set to 100% and the other is set to 90%. I've added a div directly underneath the second section. To keep the div stuck I've set "top" to 190% in order to simulate the length of the two sections. Although I've set a minimum height to each section, which makes the div crawl underneath the sections when they've stopped resizing.
How can I avoid this whilst using "position: absolute" for the elements?
html example (using one larger section):
<html>
<body>
<div class="section1"></div>
<div class="box"></div>
</body>
</html>
css example:
.section1 {
display: inline-block; width: 100%; height: 100%; min-height: 500px;
position: absolute;
}
.box {
width: 100%; height: 200px;
position: absolute; top: 100%; margin-top: 50px;
}
Thanks,
Jonathan
Just don't use position:absolute.
I'm assuming the reason you had it is because you needed height 100% of the viewport, without using JS. You could use the vh unit, but it doesn't have the best support/reliability.
The easiest way is to simply set html and body to height:100%;:
body,
html {
margin: 0;
height: 100%;
}
.full {
height: 100%;
background: teal;
}
.shorter {
height: 90%;
background: #fbfbfb;
}
footer {
background: #222021;
color: white;
text-align: center;
padding: 10px;
}
<section class="full"></section>
<section class="shorter"></section>
<footer>Made with love by a kitten</footer>
Note that I did add extra CSS for styling purposes.
I am aware of the image resizing technic of changing image proportions based on width:
img{
max-width: 100%;
height: auto;
}
I need to do the same thing only based on the height of the parent, not the width. I have tried the following with no effect:
img{
width: auto;
max-height: 100%;
}
I hope I explaining this well enough.
Please help :)
max-height will only restrict the height to be less than the given value.
If you want it to be the same as its parent.. give it as height: 100%
hence this should work:
CSS:
img{
height: 100%; // changed max-height to height here
width: auto; // this is optional
}
You cannot effectively base it on the height using standard css techniques, but you can make the height relate directly to the width of the image for a more flexible layout. Try this:
img {
position: relative;
width: 50%; /* desired width */
}
img:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
i have tried this and it worked .
<div class="parent">
<img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>
.parent {
width: 100%;
height: 180px;
overflow: hidden;
}
see it here
https://jsfiddle.net/shuhad/vaduvrno/
For example this div is displayed:
<div class="circle"></div
.circle {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
}
but when width and height are in % it collapses:
.circle {
width: 30%;
height: 30%;
background: red;
border-radius: 50%;
}
Is there a way to get it displayed?
This is because the div has no height. width: 30%; will always make the div 30% width of the parent (<body>, in this case), which is what you want. However, height behaves a little differently.
You need to specify a 100% height for body and html like so:
html,
body {
height: 100%;
}
Working Fiddle
You can read why height: 100%; behaves like that here
You need to declare a hard width/height somewhere, in this example I put a hard width/height on a container div:
http://jsfiddle.net/exrNm/1/
<div class="con">
<div class="circle"></div
</div>
.con{
width:300px;
height:300px
}
.circle {
width: 30%;
height: 30%;
background: red;
border-radius: 50%;
}
You could easily set a hard width somewhere up the parent chain. The % needs a hard value to calculate against.