I have a div with an image inside. Images have varied sizes and orientation, I want the images to resize proportionally if the image size is larger than the frame (images should retain the original size if they are smaller than the frame).
My problem is the image does not resize proportionally in Firefox (image is no longer proportional, height increases if the image width goes over the max-width property, though the width respects the max-width property), but looks fine on Chrome.
I'm not sure if this could be fixed with CSS alone, but a CSS-only solution would be preferred if there is any.
CODE
.frame {
width: 160px;
height: 160px;
border: 10px solid #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.frame img {
box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9);
max-width: 140px;
max-height: 140px;
}
<div class="frame">
<img src="//s3.amazonaws.com/ssiCebu/Confirmit/APAC/2015/May/23991558_LowRateRepricing/cards/1.jpg" />
</div>
<br><br>
<div class="frame">
<img src="//i.bnet.com/blogs/vertical_farm_in_desert_chris_jacobs.jpg" />
</div>
Here is working fiddle for your example: https://jsfiddle.net/tjmrmLcc/2/
Try and edit following CSS rule
.frame img {
box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9);
width:100% /*Added Rule*/
max-width: 100%;
max-height: 140px;
}
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>
I've got a flexbox container in which I'm trying to display two images with drop-shadows side-by-side. I want them to take equal amounts of horizontal space even though the images differ in size. I'm using a container with style "display: flex" and using "object-fit: contain" for the images to cause them to scale. My code works if I don't give the container a specific height. If I give the container a specific height, such as 300px, the images scale down, but the drop-shadow appears at a distance from the image edges as though there's a box wrapping them. This seems odd behavior. Can anyone explain this odd-seeming behavior, and is there a way in which I can give the container a height and still get it to work?
Fiddle to illustrate: https://jsfiddle.net/Lej1a6vp/
html:
<div class="container">
<img class="image" src="http://via.placeholder.com/300x400" />
<img class="image" src="http://via.placeholder.com/400x300" />
</div>
css:
.container {
display: flex;
margin: 1em auto 3em auto;
width: 500px;
height: 200px;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
height: 100%;
width: 40%;
margin-left: 1em;
object-fit: contain;
}
If you set the height to auto it will make them the same width but height will be different, if you want them to be the same height and width then you have to use an image with the same aspect-ratio for this to work since it is not possible to make it the same width and height without cropping if aspect ratios are different.
There is a #FutureCSS property called aspect-ratio: 16 / 9; in which you can lock elements to a specific ratio but it's still not available in all browsers;
.container {
display: flex;
margin: 1em auto 3em auto;
width: 500px;
height: auto;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
height: auto;
width: 50%;
margin-left: 1em;
object-fit: contain;
}
BDB88 provided me with the clue I needed, and thanks for that. My objective is to make a responsive layout that will show the drop shadow around the images and not some ghostly outline that's at a distance, and I want to keep the images' aspect ratios. I also want to mandate a particular height for the container, and not have the images overflow outside of it. My use of "height: 100%;" for the img tag was what was causing the problem. Combining that with the "width: 40%;" was causing conflict because both requirements can't always be satisfied simultaneously. By changing to "max-height: 100%;" and "max-width: 40%;" for the img tag, I'm getting the behavior that I was after. The CSS is now (I made some additional edits to make the behavior more apparent when viewing and scaling the window to simulate larger/smaller screen sizes):
.container {
background: yellow;
display: flex;
margin: 1em auto 3em auto;
width: auto;
height: 200px;
justify-content: center;
align-items: center;
}
img {
box-shadow: 8px -8px 10px #00000080;
max-width: 40%;
max-height: 100%;
margin-left: 1em;
object-fit: contain;
}
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
How do I add 1px border to a div whose width is a percentage?
(3 answers)
Closed 3 years ago.
I am creating an overlay but the width ends up wrong on the right. Where do I go wrong? In the end I want some buttons that are 100% width of the screen, minus some margin.
body
{
width: 100%;
margin: 0px;
}
.a1
{
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
.a2 {
width: 100%;
border: 5px solid blue;
}
<div class="a1">
<div class="a2">The width is going to far on the right</div>
</div>
You don't need to specify width: 100% on the child div a2. As a block element, it will automatically fill the available width of the parent element, which is set at 100%.
Your a2 CSS becomes:
.a2 {
border: 5px solid blue;
}
In this way your margins are respected and work as expected:
* {
box-sizing: border-box;
}
body
{
width: 100%;
margin: 0px;
}
.a1
{
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
.a2 {
border: 5px solid blue;
}
<div class="a1">
<div class="a2">The width is going to far on the right</div>
</div>
Following OP comment about sizing of elements
I notice that you don't specifically mention that you are using border-box as your box-sizing methods. I have added this into the snippet now.
Using border-box means that when you specify the size of a box, you are including the borders inside that size.
For example, if the width is set to 100%, this is 100% including any borders you have on your elements. Most normalized stylesheets set box-sizing to border-box by default.
I have the following elements:
<body>
<div id="container">
<div id="sidebar1"></div>
<div id="content">
<h3>Lorem ipsum</h3>
<p>Whatnot.</p>
</div>
<div id="sidebar2"></div>
</div>
</body>
Following this style:
/* ~~ this fixed width container surrounds all other divs~~ */
#container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
#content {
padding: 10px 0;
width: 600px;
float: left;
}
#sidebar2 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
I am trying to achieve this layout: http://jsfiddle.net/QnRe4/
But as soon as I un-comment the borders it turns into this: http://jsfiddle.net/FZxPQ/
** Solved **
The border width was added to each element's total width making them too wide to fit in the container. Removing 2x the border width from each column's width solves the problem: http://jsfiddle.net/FZxPQ/4/
CSS box-sizing to the rescue! This property
alters the default CSS box model used to calculate widths and heights of elements
The border-box value means that
the width and height properties include the padding and border
/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
However, browser support is not 100% standardized.
As other answers have already mentioned the extra width which pushes the sidebars out of alignment is because the width calculation includes the border width. box-sizing simply tells the browser that an element with a given width/height should include any border and padding values into the final width/height calculations.
The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.
So change your container to:
#container {
width: 970px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
See: http://jsfiddle.net/QnRe4/13/
When you apply the borders, that goes outer the divs, so the sidebars will have 184px width which doesn't fits to the container. try addig width: 176px
http://jsfiddle.net/QnRe4/12/
#sidebar1 {
float: left;
width: 176px;
border: 2px solid black;
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
Like this? http://jsfiddle.net/QnRe4/3/
What's happening is that your elements are losing their block display properties when you remove the borders.
So, adding display: block to those elements resolves that.
I've also adjusted your element's widths by 4px in width to retain the layout, since removing those borders essentially reduces the space that those elements occupy on-page.
At the moment I have a layout that pulls a number of thumbnails into a grid - each is defined by a style that keeps them a fixed ratio, (roughly 16:9) which is defined by pixel dimensions (389px x 230px) but they are looking a bit small on high-res screens.
The images are actually pulled into the DIV as a background that covers 100% width and height of the DIV and then the DIV's obviously control the aspect and size.
What I am looking to do is have these DIV's dynamically resize based on the page size of the device but to keep the ratio of the DIV's.
Is this possible?
My thoughts would be to set the width based on the percentage of the page but then I'm not sure how I would set the height and keep the correct aspect ratio (due to different resolutions etc.)
What would be the best way to do this?
EDIT - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment.
In my HTML I've got the following code which generated the grid
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
This is styled with the following CSS
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
The reason I'm implementing it this way is so that the Div can float over the bottom of the image.
Just a quick idea which might be useful for you.
It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
http://jsfiddle.net/xExuQ/2/
body,html { height:100%; }
.fixed-ratio-resize {
width: 50%; /* child width = parent width * percent */
padding-bottom: 50%; /* child height = parent width * percent */
height: 0; /* well, it is not perfect :) */
}
If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
Reference:
http://www.w3.org/TR/CSS2/box.html#margin-properties and
http://www.w3.org/TR/CSS2/box.html#padding-properties says:
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
EDIT
http://jsfiddle.net/mszBF/6/
HTML:
<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
<span class="titles">
<span class="name">Unicomp Studios</span>
<span class="title">Springs Buckling (2012)</span>
</span>
</a>
CSS:
.griditem {
float: left;
margin-right: 17px;
margin-bottom: 17px;
min-width: 100px; /* extremely narrow blocks ==> crap looking */
width: 30%;
background: blue no-repeat;
background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
/* <a> elements must only have inline elements like img, span.
divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
display: block; /* so display those inline elements as blocks */
padding: 5px;
margin: 0 auto;
margin-top: 105%;
background: yellow;
}
.titles > span {
display: block;
}
I know this might not be the best solution, but
<html>
<style type="text/css">
#cool{
width:40%;
background:blue;
padding-bottom:10%;
}
</style>
<div id="cool" >
</div>
</html>
Here Ive used padding-bottom, to maintain its height relative to its width. U can set padding-bottom as a percentage. Hope this helped.