Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
In html when you have an image and it's set to 100% width, the height of this element automatically stays proportionate. I'm looking for element that can mimmick this functionality without the image. I was thinking about using a transparent image but this seems like it's something that should be possible with css.
Not looking for a javascript solution
This is possible using the newly introduced viewport percentage lengths (with some limitations).
div {
background-color: peru;
height: 20vw;
width: 20vw;
}
There are four possible units:
1vh - relative to one percent of the viewport's height.
1vw - same as above, but relative to the viewport's width.
1vmin - this is equal to either vh or vw, whichever happens to be smaller.
1vmax - same as above, but equal to the max of either vh or vw
The only caveat is browser support. The vmin & vmax units aren't supported until IE11 and the vh and vw lengths are supported in IE9+ but were only recently implemented in mobile browsers. iOS7 also apparently has problems rendering the vh unit.
The answer: It's impossible without image or javascript
Found a solution here.
I boiled it down to this http://jsfiddle.net/47amX/
<style>
.scaling-img {
position: relative;
visibility: hidden;
width: 100%;
min-width: 100%;
}
.outer {
margin:10px;
max-height:340px;
max-width:340px;
position: relative;
outline: 1px solid grey;
}
</style>
<div class="outer">
<img class="scaling-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>
Related
Problem
I am trying to set my root font-size to use vmin and px in a calc() function. When setting a circle div's height and width with rem, said circle is "squished" at small sizes (see photo and link below). When the div is inspected, the computed width and height are reported to be equal, despite its "squished" appearance.
Link to JSFiddle
html {
font-size: calc(10vmin + 1px);
}
.circle {
height: 1rem;
width: 1rem;
background-color: blue;
border-radius: 50%;
}
<html>
<div class="circle"></div>
</html>
Troubleshooting
When the height and width are changed to a px value the issue is fixed. Additionally changing the root font-size to not use vmin, vh or vw to calculate the size also seems to fix the problem.
As pointed out by Aditya Sarin, changing the size of the div using vh or vw also fixes the error. It seems the only way to reproduce this error is by using calc() with a viewport unit and px value.
Question
Why does using calc() with a viewport unit seem to cause this error? Is it generally not considered wise to mix a viewport unit with a px value to create responsive rem sizes?
I'm not sure whether this is an illusion, but having tried both the border-radius method given in the question and background-image radial-gradient (which gave worse results) I think using the filled circle Unicode character gives better results.
Whether the typeface chosen will alter things needs experimentation, as does whether anti aliasing settings make a difference. Here is a snippet with the border-radius and character methods so they can be compared. It is possible that a character will give a better result as typeface designers will understand how to smooth things as far as is possible. It may also be worth trying the larger Unicode filled circle and shrinking it.
html {
font-size: calc(10vmin + 1px);
}
.circle {
height: 1rem;
width: 1rem;
background-color: blue;
border-radius: 50%;
}
<html>
<div class="circle"></div>
<div style="color:blue; font-size: 2.4rem;">●</div>
</html>
You can try to specify the dimensions using vh and vw
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have this blogspot blog: sourcewing.blogspot.com
Now if you go to drawings tab, you'll notice the electric bulb image is not aligned center of the post. What I want to say is that it is taking its original width and height. If the width would be 1200px, it would go out of the tbody (Please check the HTML of this image).
What I want is that it should shrink automatically (maintaining the proportions), according to the width of div class="post-body entry-content"... element (you'd find by inspect element). This should apply on the all images that have more width than this div.
Also, I would like to know why isn't it automatically shrinking, while the text is automatically aligned?
Remove the fixed height and width attributes from the img element.
You can then add a class eg .auto-contain or whatever with the following css:
.auto-contain {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
This will force the image to always have the same width as the container, but the height will grow in proportion.
So you are missing a few things.
height: auto;
max-width: 100%;
box-sizing: border-box;
This will achieve exactly what you are after.
Just to explain:
height: auto; - This will make sure your picture remains in proportion.
max-width: 100%; - Your image will behave responsively but wont break it's own natural sizing.
box-sizing: border-box; - Because you have padding you don't want to break the width this will keep padding but not break out of your container.
First remove the width and height attribute from your img tag.
To solve the problem :
img {
height: 90%;
width: 90%;
}
if you set height and width 100% normally your image would be as big as the parent. But in your case this does not work. 90% however looks better.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I saw somewhere that it wasn't recommended to use height and use padding instead, why that? The height and the padding produces the same results - at least in my trials -... is there a reason for me be to be using padding only instead of height?
To answer your question - of course you can use height in responsive websites without a problem.
I think where you may have read about using padding in place of height is for keeping the aspect ratio of an element the same since percentage based padding is relative to the width of the element and percentage based height is relative to it's container.
A common use case for this is embedding a YouTube video in a responsive wesbite.
HTML
<div class="video-container">
<iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&rel=0&showinfo=0&modestbranding=1&controls=2&autohide=1" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
Fiddle here: http://jsfiddle.net/84wm08k7/
As you can see the height of the video-container is set to 0 and the padding-bottom is set to 56.25%. This restricts this element to being a 16:9 aspect ratio for video and is responsive.
well to start if you use padding then the page will stretch itself to fit the screen leaving the given amount of border (padding). If you use a specified height (in pixels per say) the page will always be the same height regardless the resolution of the screen. If you are using height as a percentage or some analogous value, than it shouldn't matter other than that the amount of space (padding) will vary depending on the screen.
It depends on what you're doing. For a lot of my work, I'll set a min-height or max-height that way the element grows or shrinks depending on the content.
Padding would work as well, if for instance you have an element with text that would be centered vertically, you can use padding to control height as well. It's all up to the site design, and what you're trying to accomplish.
this is a code example you can check w3schools.com for further information, I've chosen the example in which you can manipulate the dom
function myFunction() {
document.getElementById("myBtn").style.height = "50px";
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button>
</body>
</html>
This question already has an answer here:
Maintain aspect ratio of a div according to height [duplicate]
(1 answer)
Closed 8 years ago.
Is it possible to make a square div with css based on its height in pixels?
This question is similar to this one (marked as duplicate), but in this case I want height to be set in pixel or any unit.
When based on width, there is a simple solution :
.mydiv {
height: 0;
padding-bottom: 100%;
}
But here 'height follows width'. I'm looking for solution where 'width follows height'. So if I would set height to 300px, width would follow it.
For now I'm doing it using javascript, updating on window resize. But I would like to find a CSS solution, thats why I'm not looking for a javascript solution
Here is a playground
You could use the new viewport size units
JSfiddle
CSS
html,body {
height: 100%;
margin: 0;
}
div {
background: red;
height: 100vh;
max-width:100vh;
box-sizing: border-box;
}
Support is effectively IE9 and up
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
is possible to make a specific element about 5px longer that it would automatically be? because my article element has a video element which sticking out of the given space a bit, while I could just set the height manually I thought it would be better to have it set itself automatically (like it normally does) only adding about 5px. Any Help?
I'm not sure I understand the question, but have you tried giving it a padding-bottom of 5px?
Try using a dynamic width to set the width of your contained element.
Eg.
article {
width:300px;
}
contained-element{
width:95%;
}
Just give padding-bottom:5px to your <article> elements, & make height:auto for both elements, then <article> element will expand as per height with 5px at bottom.
Am not very much sure what are you asking about but if it's regarding fitting your video in a div for that you can create a wrapper class such as
.wrapper-div {
position: relative;
padding-bottom: 20%;
height: 0;
}
then have the child element inside it
.element-to-load{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I assume you want to the div to expand if the video is larger than the article.
To do this you just need to:
1) Give the Outer Div a height:auto - and a min-height:
2) Give the Inner Div a margin-bottom of 5px
Check out this Fiddle Demo
Does this answer your question?
Just set the CSS for that element be (use the actual pixel width and height):
height: 25px;
width: 50px;
and the height and the width will be forced to be that height and width.
Although if possible try to use 'em' so that it is automatically responsive.