I have a gallery in the center of my website - it has a dynamic width (bootstrap column), and fixed height (80vh). I want the images inside to have 50% width of the container, and 350px height:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="height: 80vh;">
<div style="overflow-y: auto;">
<div style="width: 50%; height: 350px; float: left">
<img src="..." style="min-width: 100%; height: 350px;">
</div>
<div style="width: 50%; height: 350px; float: left">
<img src="..." style="min-width: 100%; height: 350px;">
</div>
<div style="width: 50%; height: 350px; float: left">
<img src="..." style="min-width: 100%; height: 350px;">
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
The thing is that when I resize the website, the width is changed, and the height stays the same - the image gets resized. Is there a better solution? I've been thinking about zooming on an image instead of resizing the whole thing - is this possible?
If you strictly have to use a 350px height for each gallery item and want images to maintain aspect ratio, you can use background-size: cover to zoom in and crop the images instead of resizing them. See: https://jsfiddle.net/nelonoel/c8zsscuL/
Related
This question already has an answer here:
flex items ignoring width
(1 answer)
Closed 1 year ago.
I am trying to have a number of columns with exact widths, and their heights split evenly between some number of elements. For some reason, despite my indicating an exact 200px width on each column, they are instead getting a computed width of 162px somehow.
Chrome dev tools is showing some weird arrow thing indicating that it it was shrunk from it's intended size for some reason. I've even tried removing all of the content from the div's as possible so as to rule out some weird interaction with the size of children.
The HTML content for the relevant area is this:
div {
background: rgba(255, 0, 0, .1);
}
<div style="display: flex;">
<div style="width: 200px; margin-right: 100px;">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 400px;"></div>
</div>
</div>
Including some dev-tools highlighting (showing the arrow thing I described) it is rendering like this (the "round" labels at the top are not in the HTML content above but are properly 200px + 100px margin):
I have never seen anything like this before, especially those arrow things from the dev tools. Is there something obvious I'm missing or something I should look for to diagnose this?
Setting display: flex turns the sizing of child elements over to the flex container. If you don't want the individual elements to resize, set flex-grow: 0, flex-shrink: 0, and flex-basis: 200px. You can do all three using the flex shorthand:
flex: 0 0 200px;
.container {
display: flex;
}
.container > * {
flex: 0 0 200px;
margin-right: 100px;
}
div {
background: #cccccccc;
}
<div class="container">
<div style="width: 200px; margin-right: 100px;">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 400px;"></div>
</div>
</div>
This is the default behaviour for Flexbox. If you add up all your widths, so 200 width + the 100 margin, you get 300 * 4 = 1200px. If your viewport is smaller than 1200px then the browser will try to calculate the best width it can to fit all your div along the main axis. thus you are getting 162 + 100 * 4 is just shy of 1200. Try resize your viewport or the browser screen to bigger than this and you should get the expected behaviour.
The arrow you are seeing is Chrome dev tools way of telling you your original width has been made smaller to fit all content.
I want to create html code using Bootstrap. But i have a problem. I don't adjust div's height according to a browser height. I tried everything i know.
How can I adjust the div's height browser height?
Here is my code:
body{
height: 100%;
width: 100%;
}
#leftMenu{
height: 500px;
}
#viewport{
height: 400px;
overflow: hidden;
}
#informationMenu{
height: 100px;
overflow: scroll;
}
#rightMenu{
height: 500px;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu" style="background-color: #cc0052" >
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row" id="viewport" style="background-color: aquamarine">
</div>
<div class="row" id="informationMenu" style="background-color: cadetblue">
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu" style="background-color: #bfff00">
</div>
</div>
</div>
</body>
You should be using vh for height. It also has responsive design. 1hv = 1% of the viewport height (broswer), meaning that 100vh will be the value you need ;)
Edit: If you're trying to do the same for width, you need to use vw instead of vh because vh refers to the height and vw refers to the width ;)
I'm using bootstrap to display a set of sm-4 divs. Each of these includes a panel, which header contains an image. These images got variable sizes,however, I would like to get these columns to share the same height. Is it possible ?
So far, this is the html
<div class="row">
<a href="/app_dev.php/fly/50" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Falaise - Dieppe</h4>
<p>3 places</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/48" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/BE36.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Bordeaux - Toulouse</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/46" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/DA20.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Flers - Pontoise</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
</div>
Here's the CSS (This is what I tried so far)
.flycard
{
text-align: left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
max-height: 200px;
min-height: 200px;
overflow: hidden;
height: 100%;
width: 100%;
}
.planepi img
{
max-width:100%;
max-height:100%;
}
And, here's the result
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted for some CSS properties, negative lengths are allowed
There are two types of length units: relative and absolute.
w3schools css units
.planepi {
min-height: 30vh;
height: 30vh;
max-height: 30vh;
overflow: hidden;
}
vh Relative to 1% of the height of the viewport
For anyone with the same problem, you need to specify the max-height of the div that holds the image:
.planepi {
max-height: 200px; //this is the max height you want
overflow: hidden; //everything that goes bellow 200px will be hidden
}
Of course it is easier for you to prepare the images to be in the same height, but this will work.
I need to set the height container to 100% browser, but when you put the contents of the tags will break containter.
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
height: 100%;
background-color:red;
}
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/1920x1080 " alt="" />
<img class="img-responsive" src="http://placehold.it/1920x1080 " alt="" />
</div>
</div>
Use vh for full height. 100vh = 100%.
Now, use container-fluidfor get full width on bootstrap 3
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/