I have a CSS question you may be able to help with.
I'm trying to build a website with a 'Fluid' layout.
All website content will be contained within a wrapper div
When the screen shirks, I Would like the wrapper div to shirk along with it's content.
However, when the screen size is increased, I would like the wrapper div to maintain a max size. The aim is to prevent images scaling beyond their native resolution and the formatting of text changing (a paragraph may become a single line on very large screen)
Can I apply a max pixel with and a percentage to the wrapper DIV? is there a better way to achieve the goal?
.wrapper {
margin: 0 auto;
max-width: 800px;
width: 80%;
background-color: #ffffff;
border: 1px solid;
height: 1000px;
}
Many thanks,
P
Yes, you can do this and it is a good practice.
Can I apply a max pixel with and a percentage to the wrapper DIV?
YES, you can apply it
.wrapper {
margin: 0 auto;
max-width: 800px;
width: 80%;
background-color: #ffffff;
border: 1px solid;
height: 1000px;
}
the width: 80%; means 80% of the screen width(or browser window) and it will not exceed max-width: 800px;
The max-width property in CSS is used to set the maximum width of a
specified element. The max-width property overrides the width
property, but min-width will always override max-width whether
followed before or after width in your declaration.
Related
I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.
<div class="imageContainer">
<img src="{{employee._image}}">
</div>
img
:max-width 100%
:height auto
.imageContainer
max-height: 300px
This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!
The images have to be set dynamically, so hardcoding the url in css with background image is not an option.
Try setting the css top and bottom properties to 0px.
img
:max-width 100%
:height auto
:top 0px
:bottom 0px
To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent.
The answer and theory around it can be found here: Child with max-height: 100% overflows parent
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I believe I was able to achieve your goal like this:
img {
max-width: 100%;
max-height: inherit;
}
I have a two column layout - fixed right column width, an scalable content in the left column.
The layout scales great with different screen sizes until I add images to the scalable column. If the container goes down to the size of the image it pushes the column too wide, squashing my 300px right column.
I set
width:100%;
on the images, which solves the responsiveness issue, but when the container is full screen again the images scale to fill it, which is not what I want because it looks rubbish. I've added
max-width:100%;
which hasn't helped.
In short, I want the image behaviour to be "Be your real size, unless the container is smaller, in which case shrink."
(I should mention that my two-column layout is done with flexbox)
Edit:
After playing around with this for ages, it turns out to be a difference in behaviour between broswers - Chrome scales the container, shrinking the image (as per max-width) but Firefox just pushes all the content out. Open this in each: https://jsfiddle.net/andyg1/sb7zefr5/
Remove width:100%; and keep max-width:100%;. This will keep images at their original size but shrink them to 100% width if the container is smaller.
Here's an example https://jsfiddle.net/v4kL409v/
You can use width: 100% and the real size if the image or the maximum size of the conainer as max-width, for example
my_image {
width: 100%;
max-width: 320px;
}
That way it will shrink with the container, but not grow above a set size.
You can use an image as a background to your flex-item.
background-image, background-repeat, background-position, and most importantly background-size
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.flex {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.bg {
width: 50vw;
height: 50vh;
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center;
background-size: contain;
outline: 3px dashed red;
flex: 1 0 50%;
}
.rt {
width: 300px;
height: 50vh;
outline: 3px dashed blue;
}
<div class="flex">
<figure class="bg"></figure>
<figure class="rt"></figure>
</div>
After identifying that the problem is different between Firefox and Chrome I did some research to find out that the problem can be fixed by adding:
min-width:0;
to the element containing the responsive. As discussed here: Firefox flexbox image width
Add display:block to image.
.my_image {
display:block;
max-width:100%;
height:auto;
}
This question already has answers here:
Why does CSS padding increase size of element?
(6 answers)
Closed 7 years ago.
I have a div that's 500px in width, and 500px in height. The max-width and max-height are also set to 500px. I'm trying to make the padding-left of the div to be 100px so I can move the word "Hello" 100px from the left without increasing the overall width of the div. When I set the padding-left to 100px, the overall width of my div increased to 600px, even though I set the max-width of the div to be only 500px. Is there a way for me to move the word "Hello" 100px from the left without having the width of the div being increased, or wrapping another element around the word "Hello"?
div {
border: 1px solid red;
width: 500px;
height: 500px;
max-width: 500px;
max-height: 500px;
padding-left: 100px;
}
<div>
Hello
</div>
You need to adjust your box model. Put this in your CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Paul Irish explains how the box model works and why we have to define it this way.
Essentially, when we use padding it adds itself to the value of the inner width/height. By adjusting your box-sizing to border-box you're saying that if your box is 500px wide, and you apply padding-left: 100px, it will simulate the box being only 400px to compensate for the padding - to give a total of 500px.
Browser support is universal at this point, and it performs well (despite the use of the * selector, which has as much of an impact as use HTML tags like h1 and p in CSS).
UPDATE: Note that the CSS above affects all elements that use the box-model. Whenever I update one box-model on a stylesheet, I update them all to prevent overlooking this detail later in the game when I am attempting to maintain continuity.
You can try using box-sizing: border-box, so as to force the declared height to take into account your padding(s).
div {
border: 1px solid red;
width: 500px;
height: 500px;
max-width: 500px;
max-height: 500px;
padding-left: 100px;
box-sizing: border-box;
}
<div>
Hello
</div>
I am playing around with a responsive layout and I am trying to get my image handling to behave a specific way.
I want the max-width of my image to never exceed its actual resolution, however if that is too wide for the screen I'd like the width to be 90% of the screen width. The only solution I can come up with for this is set width: 90%; and then to hard-code the max-width for every image I want to display like this, which is problematic if I want to change the image on the fly or update it frequently.
Is there any CSS I can use to describe this scenario or do I have to rely on javascript tricks to set the max-width from the image's actual width once the image has finished loading?
I think the following may work. Set the max-width: 90% and the let the image take its natural width (width: auto, default value).
See the samples below.
There is an end-point (corner case) when the image size is identical to the width of the containing block (screen size). In this case, the image will take 90% of the width of the parent block. If you need this to be 100%, you would need jQuery/JavaScript to take care of the exception.
div {
border: 1px dotted blue;
margin: 10px 0;
}
div img {
max-width: 90%;
vertical-align: top; /* Removes white space below baseline */
}
.ex1 {
width: 500px;
}
.ex2 {
width: 400px;
}
.ex3 {
width: 300px;
}
<div class="ex1">
<img src="http://placehold.it/400x100">
</div>
<div class="ex2">
<img src="http://placehold.it/400x110">
</div>
<div class="ex3">
<img src="http://placehold.it/400x120">
</div>
I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:
img {
width: 100%;
height: auto;
max-width: 100%;
}
Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?
Just specify max-width: 100% alone, that should do it.
Found this post on a Google search, and it solved my issue thanks to #jwal reply, but I made one addition to his solution.
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}
With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width
This way my image won't break out of the containing div, and I can still float the image within the content div.
I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.
Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).
Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be too hard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.
In line style - this works for me every time
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>
You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/
I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}
I found an answer which worked for me and can be found in the following link:
Full Width Containers in Limited Width Parents
I found max-width:inherit; worked for me
I wrote this code:
div.image {
height: auto;
width: 100%;
}
div.image img {
height: inherit;
width: inherit;
}
max-width: fit-content; worked for me.
If the image is smaller than parent...
.img_100 {
width: 100%;
}
I would use the property display: table-cell
Here is the link