If I set the max-width css style on the body tag and a image inside the body is wider than the max-width of the body, the images will not obey the max-width. I want the image to resize, not just hide the overflow.
Why?
And how do you fix this?
Fiddle: http://jsfiddle.net/pRMzs/
max-width is not inherited automatically.
If you want specific tags to inherit the style width, you have to specify it explicitly to do, like this:
body
{
max-width: 200px;
}
img
{
max-width: inherit;
}
EDIT: Here's the link to the spec http://www.w3.org/wiki/CSS/Properties/max-width
Images do not scale according to the parent max-width size. You need to scale the images themselves to fit inside the content, making them inherit the parent width, or setting the max-width:200px;
If you do not want to scale pictures, but do not want the parent element to stretch, just use overflow:hidden and the extra portion of the image will be hidden.
As a rule of thumb, setting width (especially max-width) on the body tag is bad practice for reasons I won't go into here.
In this case, it's the choice of using the body tag to define width that is causing you headache.
Here is my jsfiddle: http://jsfiddle.net/pRMzs/17/
The only way to get the effect you are looking for is with a #container div of some kind (the CSS just can't target the body tag).
For the sake of making the answer visible on stackoverflow...
EDIT: The request was made that the image flow to 100% the size of the container. Just add width: 100% to the image. Give it a special class to avoid this effect on all <img>'s
the HTML you need is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="container">
<img src="http://www.prepolino.ch/sprache/trennen/bilder/test.gif">
</div>
</body>
</html>
and the CSS:
body
{
}
#container {
padding: 10px;
max-width: 200px;
overflow: hidden;
background: red;
}
img {
width: 100%
}
Related
I am absolutely new to HTML & CSS and trying to learn it, hence this question. My target was to create a responsive image which doesn't exceed the original size of the image. Found some info on this question and I was able to do it by putting the image in an inline-block which is in a div (see the code snippet), but it doesn't answer a fundamental question. How is the responsiveness working.
For the case when the viewport is larger than the image, my HTML code makes sense i.e. the width of the image is 100% which means take the size of the parent container. In this case the parent container is inline-block whose size is actually the size of the content it's enclosing, so 100% means the image will be displayed with it's original size.
But when I resize the browser window to a smaller size, the image resizes with it. Here I am not able to understand the mechanism of action. As per my info (which is limited as of now) the inline-block always takes the size of contents it's enclosing, then how come it's resizing when the outside container is changing it's size.
Is it something that inline-block will take the size of the content TILL it's fitting in the parent container BUT as soon as the parent container is not sufficient to fill the inline-element, the inline-element will resize to the parent container and NOT the content it has in itself?
P.S. - My first question on Stack Overflow.
.container {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.responsive-image {
width: 100%;
max-width: 1920px;
}
.inline-block {
display: inline-block;
border: 2px solid purple;
padding: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="inline-block">
<img class="responsive-image" src="https://drive.google.com/uc?authuser=0&id=0B3Fs1er7k9QAQUU1bzhqYWMxeUU">
</div>
</div>
</body>
</html>
width: 100% means its width depends on its parent.
.inline-block {
display: inline-block;
border: 2px solid purple;
padding: 3px;
}
This is a class if it will be applied on a ny div then all the elements with this class will shown inline with there side one.
width:100%;
Is something related to the total width and here total width means as much as the size of its parent div. If the size is changed something to 700px it will take 700px because of the code refers that whatever the parent div has, take that.
Some basics first:
First you need to understand what is inline(Reference: Inline element) and what is block (Reference: Block element)
Block element: A block-level element always starts on a new line and takes up the full width available i.e. 100% width(stretches out to the left and right as far as it can).
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
Inline element : An inline element does not start on a new line and only takes up as much width as necessary.
Examples of inline elements:
<span>
<a>
<img>
I think, by now you can get the idea what is inline-block means then ?
inline-block: Any element with inline-block will be displayed inline and will take 100% of width available to it like what block element takes. Therefore, if there is any inline element with width say 30% is already available and now you apply property: display as inline-block, then whole of leftover 70% width will be taken. Here, leftover 70% is actually width 100% for inline-block
Here is the reference.
I hope it helps.
When you set image in width: 100%, it will fill the width of the container where the image belongs. Even though how much width the container has.
If you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (if you specified box-sizing:border-box, in which case only margins are added to the 100%)
I noticed that setting the html and body height to 100%, the body's width seems to be set automatically to 100% (even if it does not appear among the css rules), why?
<html>
<head
<title>full screen</title>
<style>
html, body{
margin: 0;
height: 100%;
background-color: rgb(200,50,50);
}
</style>
</head>
<body>
</body>
</html>
http://jsbin.com/wocini/1/edit?html,css,output
Setting these elements' heights to any value (or even not setting it at all) doesn't change their width, which is 100% by default due to them being block elements.
You can verify this by inspecting any HTML page in your browser and looking for the property display: block;, defined by user agent stylesheet (your browser), in these elements.
I am trying to use height property using percentages, but it doesn't work. I want to use percentage so it looks fine in any resolution.
<div id="bloque_1" style="height: 80%;background: red">
</div>
How can I make it work?
When you are using % for width, or height, the 1st question you should ask is that 80% of what? So you also need to apply height to the parent element, so assuming that this element of yours is inside the body tag, you need to use this in your CSS
html, body {
height: 100%;
}
So now your div element will be 80% of 100%
Demo
Side Note: Also when you are dealing with absolute positioned elements, you may come across a scenario where your div won't exceed the current viewport height, so in that case you need to have min-height
Everything outside of bloque_1 will need a height as well, or you'll get 80% of 0.
You may also have to apply a height of 100% to the body.
Here's a jsfiddle that shows it in action.
Apply 100% height on your parent element
HTML code-
<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">
</div>
</body>
</html>
CSS Part-
html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }
Working Fiddle - http://jsfiddle.net/SEafD/1/
Demo
html,body{
height:100%
}
#bloque_1{
background:red;
height:80%;
}
Look at this example
The html does not respect min-width as long as we have float:right in the CSS rules
.right {
float:right;
background:blue;
min-width:400px;
}
If removing the float:right or changing it to float:left, then the html element will not be narrower than the min-width.
How we can use min-width for an element floated right?
Screenshot: As commented by some fellas, this is what I see on the latest version of Chromium on Debian.
As you can see the left side of the div including its content is invisible (in other words, outside the visible part).
The right-floated div is doing just what it is told to in the original example: it is remaining at least 400px wide. If the viewport is reduced to less than 400px, part of the div is obscured, because it's not allowed to get any narrower than 400px. So the question is, what behavior do you really want here? Perhaps what you really want here is a non-floated wrapper element that has a min-width of 400px?
EDIT: Here's an example of how a non-floated wrapper will make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body {
background:red;
margin: 0;
padding: 0;
}
.wrap {
background:#e7e7e7;
min-height: 600px;
min-width: 400px;
}
.right {
float:right;
background:blue;
min-width:400px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="right">
TEST
</div>
</div>
</body>
</html>
The wrapper could of course be colored red. I just made it gray so it was easy to see.
div is a block level element, by default it will take up 100% space..
Alternatively if you want to see only 400px element instead of 100% width you can use display: inline-block, or specify a fixed width to it.
Demo
Note: If you don't want to use display: inline-block; you can just keep it the way it is, if you minimize the window, you'll see a horizontal scroll bar so if you think that using min-width will only show element with a width of 400 px than you are wrong, it is min and not max
I set body {margin: 0 auto; width: 900px;}
100% width of display
I want one of div (or section) inside that body to be 100% of display (not its parent 900px, but more).
What styles should be applied for this div?
<body>
<div>
900px width of this text
</div>
<div style="???">
the whole 100% length of display
</div>
</body>
I don't think you can do it if you set a width on <body>. I'd leave <body> alone and do something like:
div {
width: 900px;
}
div.fullwidth {
width: 100%;
}
and then make sure your content is a series of <div>s, some of which have class="fullwidth" (such elements need to be non-nested, since for a nested element "100%" will be interpreted as "100% of the containing element" which in turn works out to "100% of 900px").
If you want the <div> to be 100% of the screen width, you must set display property in CSS.
display:block;
An example.
You can set position:absolute; which would keep it from inheriting the width from the body.