Currently I have the following rule
img{
height: 100%;
width:100%;
}
This works fine in most of the cases.
Is it possible to display the image at it actual size when -
image width < container width
Please note that image width is unknown.
UPDATE: CONTAINER WIDTH IS ALSO UNKNOWN.
There is. Set the max-width to 100% of the container so that when the container shrinks beyond the intrinsic (original) image size, the image also shrinks (as how it behaves in your current rule). This way, the image isn't forced to set its width to 100% of its container; it is allowed to maintain its intrinsic size (i.e. it only needs to shrink its size when the container is smaller than its intrinsic size because its width is limited to a maximum of 100% of the container).
.container {
width: 500px;
border: 1px solid black;
border-radius: 5px;
margin: 40px 0;
overflow: hidden;
}
img {
max-width: 100%;
}
.container-two {
width: 300px;
margin: 20px 0;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
* {
font-family: Helvetica;
}
<p>Image within container. Container is 500px wide, but image doesn't scale; it still maintains its intrinsic (original) width</p>
<div class="container">
<img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
</div>
<p>Image within container. Container is 300px wide (smaller than the original image width, which is 381px), but image still shrinks to fit inside the container while displaying fully</p>
<div class="container-two">
<img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
</div>
<p>Image not within container. Original image size (381px for the width)</p>
<img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
The object-fit and object-position property work for me. So my new rule with this property -
img{
height: auto;
width:100%;
object-fit: scale-down;
object-position: 0 0; /*top left position (optional)*/
}
Related
I have made a bordered box. Here is the css code:
.Box{
height: 500px;
width: 700px;
border: 2px solid black;
margin: auto;
margin-top: 10px;
}
When I run the following CSS my box appears as shown in the image below.
Now when I try to decrease the size of the containing block of the box, till there is a margin on both sides the box remains in the middle and the margins decrease but once the margin space is over the left border becomes stationary and only the right portion starts to shrink.
In the above image, it could be seen that the margin has fully shrunken and now the left side is stationary and the right side is only shrinking
I want the box to shrink from both sides equally even when the margin is over. Please guide me on how I could achieve this. Please let me know if more information is required.
You can use the CSS function min to make sure the box is 700pa when its container has a width greater than or equal to 700px, and thereafter it will take on the width of the container.
This snipper transitions the container width from 100vw to 100px (and vice versa) when you click the button. It has a backgound color so you can see when it is larger than the box.
body {
width: 100vw;
}
.container {
width: 100vw;
transition: width 5s linear;
margin: 0 auto;
background-color: #eeeeee;
}
.container.shrink {
width: 100px;
}
.Box{
height: 500px;
width: min(700px, 100%);
border: 2px solid black;
margin: auto;
margin-top: 10px;
}
<button onclick="document.querySelector('.container').classList.toggle('shrink');">Click me to make the container shrink/grow</button>
<div class="container">
<div class="Box"></div>
</div>
In your approach if you change your width:700px; to max-width:700px;
when screen shrinks, both left and right borders will shrink with them because when the screen width is smaller your box's width will be equal to screen width.
.Box{
height: 500px;
max-width: 700px;
border: 5px solid red;
margin: auto;
margin-top: 10px;
}
body {
min-height: 100vh;
margin:0;
}
.container {
height: 500px;
max-width: 700px;
border: 5px solid red;
margin: auto;
margin-top: 10px;
}
<div class="container"></div>
Currently I'm trying to fix a div class to always be 80% of the screen size if that's possible? I don't want the div to resize when I change the size of my browser, would I be better using media queries?
.main{
width: 80%;
min-width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
You write
I don't want the div to resize when I change the size of my browser
Well, then use a fixed width in pixels:
.main{
width: 600px; /* or whatever value you wish */
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
If you always want your div to be 80% of screen size. use viewport units. vw in your case which means viewport width.
This way your div will always be 80vw out of 100vw which is the full viewport size.
See below
.main {
height:100px;
width:80vw;
background:red;
}
<div class="main"> </div>
I have a section that i want to scale using aspect ratio, but also keep it at a maximum and minimum height. Somehow the max-height property doesn't apply to this, meanwhile the min-width works just fine.
div {
background: green;
border-bottom: 2px solid red;
padding-top: 60%;
max-height: 100vh;
min-height: 450px;
box-sizing: border-box;
}
<div></div>
What i'm trying to achieve is to display content that has a fixed aspect ratio, it scales down until reaches a minimum height, but also won't exceed the viewport height when displayed in a wider browser. See attached image for explanation:
Any ideas?
Ok, if I understand correctly, you'd need to do have the height of the box linked to the width at a percentage (which I'd do by setting the height to viewport width units rather than viewport height - in my example I've set it to 75%). That way the box stays in pro when it's not being constrained by max-height or min-height.
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-color: #00ff00;
}
.box {
width: 100%;
height: 75vw;
max-height: 100vh;
min-height: 400px;
background-color: #ff0000;
}
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.
I have a container with a max-height defined in pixels, and then an IMG within with a max-height defined in percentage. In Chrome this works as expected, in other browsers the img simply extends beyond the container.
Anyone know which is the proper behavior, and why?
<figure>
<img src="http://images.autostash.com/parts/img/medium/wix/24056.jpg" alt="no picture">
</figure>
figure {
max-width: 90px;
max-height: 90px;
border: 1px solid red;
}
img {
max-height: 90%;
display: block;
margin: 0 auto;
}
http://jsfiddle.net/Dygerati/wWRJK/
According to the MDN description of the CSS height property,
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
As a result, since you have only max-height and min-height declared, and NOT height, the img height defaults to auto.
Try this.
figure {
max-width: 90px;
height: 90px;
border: 1px solid red;
}