This question already has an answer here:
Horizontal and vertical photos in same row
(1 answer)
Closed 1 year ago.
How set the same height and keep proportions?
When i set height for example 70vh i have what i want but images are not proportional:
When i set height: auto; images are resposive and proportional but have different height:
Can i combine both and have same height and keep proportions?
HTML:
<main>
<div class="container-fluid">
<div class="row first-row justify-content-center">
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</div>
<div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">
<img src="img/projects/home/test1.jpg" class="img-fluid img">
</div>
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</div>
</div>
CSS:
.first-row div img
{
max-width: 100%;
height: auto;
}
Try to use image as background image on div element:
HTML:
<div class="bg-cover-center" style='background-image: url("img/projects/home/1.jpg");'></div>
CSS:
.bg-cover-center {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And don't forget to set width or min-width otherwise div width will be 0 because its don't have content
display: flex to the parent div then assign a height and put the width: auto for the images.
Related
So im building this website which looks like this in pc web size:
and when i resize the window to make it into mobile-sized window (phone), the jumbotrons turn into like this:
My question is that is there a way where i can add a space between the jumbotrons when it is in mobile-size? i do not want the jumbotrons to stick together just like in the picture i attached above.
my code so fo far, html:
<div class="container col-12">
<div class="row">
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" id="bg-card-1">
<h1>Cardholder #1</h1>
<p>Unique. Outstanding.</p>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" id="bg-card-2">
<h1>Cardholder #2</h1>
<p>Stunning. Modern.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" id="bg-card-3">
<h1>Product</h1>
<p>Description</p>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" id="bg-card-4">
<h1>Product</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
and css file:
#bg-card-1 {
background: url("https://i.postimg.cc/0y2F6Gpp/3.jpg") no-repeat center center;
background-size: cover;
color:white;
text-align: center;
height: 100%;
}
#bg-card-2 {
background: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg") no-repeat center;
background-size: cover;
color:white;
text-align: center;
height: 100%;
}
#bg-card-3 {
background: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg") no-repeat center;
background-size: cover;
color:white;
text-align: center;
height: 100%;
}
#bg-card-4 {
background: url("https://i.postimg.cc/0y2F6Gpp/3.jpg") no-repeat center;
background-size: cover;
color:white;
text-align: center;
height: 100%;
}
In Bootstrap 4 you can set margin and padding based on break points (xs sm md lg xl).
To set a different margin based on screen-size, you can give the element margin classes with different break points and different margin values. Like this:
<div class="jumbotron jumbotron-fluid my-3 my-lg-0" id="bg-card-3">
<h1>Product</h1>
<p>Description</p>
</div>
In this example the jumbotron would have a y axis margin (top and bottom) of 3 on xs sm md sized screens, but no y axis margin on screens that are lg or xl.
Note that to specify the xs breakpoint in Bootstrap, you simply do not add any break point at all in the class.
You can read more about spacing and break points in bootstrap at the links below.
https://getbootstrap.com/docs/4.0/utilities/spacing/
https://getbootstrap.com/docs/4.0/layout/overview/
First of all, my native language is not English I hope that question and description are clear. I'm sorry if they're not.
Problem:
I'm using MDB framework, when I use the grid system the width of the last column is more greater than body. I tried to put widht: 100%; in the content and in every column (Class: Nx).
How do I fix this?
Html:
<div class="Mycolumns">
<div class="row">
<div class="col-8 N1" style="background-image: url(Resources/img/1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N2" style="background-image: url(Resources/img/Sin%20t%C3%ADtulo-1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N3" style="background-image: url(Resources/img/3.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N4" style="background-image: url(Resources/img/4.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N5" style="background-image: url(Resources/img/5.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
</div>
</div>
Css:
.N1, .N2{
height: 500px;
}
.N3, .N4, N5{
height: 300px;
}
I just encountered the same problem. What was doing it was one of my nested elements was set to width: 100vw - The view width seems to be the entire browser window including the scrollbar, so you effectively get '100% + scrollbar width' as your width, which gave me a 15px or so blowout. Changing the element's width to 100% fixed it.
I'm trying to get image fit with bootstrap column in a row proportionally within specified height 300px, i have tried so many ways but unfortunately its not fit with column width (my 1st image dimension is 262*380 and 2nd image dimension 546*380 and im using img-responsive class)
I need my image should be like this Expected
but im getting like this Actual
My HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="grid">
<img src="https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-8">
<div class="grid">
<img src="https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg" class="img-responsive" alt="">
</div>
</div>
</div>
My CSS
.grid {
height: 300px;
border-right: 4px;
}
.grid img {
height: 100%;
}
Try this HTML:
<div class="container">
<div class="row">
<div class="col-md-4 bg-cover grid" style="background-image: url(https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg)">
</div>
<div class="col-md-8 bg-cover grid" style="background-image: url(https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg)">
</div>
</div>
</div>
with this CSS:
.grid {
height: 300px;
}
.grid img {
height: 100%;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 300px
}
I have differently sized images, but want to make them look equal by width and height on the page. What I did:
HTML
<div class="col-lg-6">
<img src = "assets/img/101.jpg" alt="Null" />
</div>
CSS
#images img {
width: 100%;
padding-bottom: 4em;
position: center;
}
But they look like that:
They have different height.
How to make it equal?
Probably I need to crop them by height and center without changing the width. Is it possible?
Explanation from the comments
I have suggested that it will probably be nice to crop them, not resize. Center and crop to the size of smaller ones.
To gain more control over your images it's best to switch to background images. You can then use background-size: cover to fill out the div.
HTML
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
CSS
.image-holder {
background-size: cover;
background-position: center center;
height: 400px;
width: 100%;
}
If your images are just static assets it's better to include the image reference in css.
You can't set both height and width at the same time for an image- it will stretch them out. Have made it a 2-column flexbox along with col-lg-6 as per requirement.
See demo below:
.box {
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 50%;
min-width: 200px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.col-lg-6.box {
padding: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
<div class="container">
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x100" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/75x75" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x50" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x150" alt="Null" />
</div>
</div>
I am working on a bootstrap project and I need to have a text and image and would look similar to a question previously asked here under the link:
How to vertically align both image and text in a DIV using CSS?
Also, I have a background banner with a fixed height of 550px.
I am trying to create this using bootstrap and have also tried using Display: table , display: table-cell, vertical-align: middle; properties but I can' t seem to get right without using putting the height:550px on the both divs containing the text and image.
.overview-banner {
background: url(../img/overview/overview-bg.jpg) no-repeat center center;
background-size: cover;
height: 550px;
.display-table{
display: table;
}
.verticle-center{
display: table-cell;
vertical-align: middle;
}
<section class="overview-banner">
<div class="container-fluid">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table" style="height:550px;">
<div class="verticle-center" style="height:100%">
<h1>The Multi-Faceted Simpuite</h1>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table" style="height:550px;">
<div class="verticle-center" style="height:100%">
<img src="{{ STATIC }}assets/img/overview/overview-banner.png" alt="Multi Faceted Simpuite" class="img-responsive img-center-xs">
</div>
</div>
</div>
</div>
</section>
I want to get the result without using height so much in the coding.
Also, I want this to be responsive when it appears in a mobile device.
Please advise if there is any other way to do it bootstrap which can be responsive and has centered text and image as per the banner height of 550px and no need of mentioning the height so often.
There was a small mistake, that you have missed the closing } in the first CSS declaration, which made the whole CSS obsolete. And also consider giving a text-align: center too. You don't exactly need the height to be specified here. You can use this way:
.overview-banner {
background: url(../img/overview/overview-bg.jpg) no-repeat center center;
background-size: cover;
}
.display-table{
display: table;
}
.verticle-center{
display: table-cell;
vertical-align: middle;
text-align: center;
}
<section class="overview-banner">
<div class="container-fluid">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table">
<div class="verticle-center">
<h1>The Multi-Faceted Simpuite</h1>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table">
<div class="verticle-center">
<img src="{{ STATIC }}assets/img/overview/overview-banner.png" alt="Multi Faceted Simpuite" class="img-responsive img-center-xs">
</div>
</div>
</div>
</div>
</section>
What browsers are you trying to support? If its most of the latest ones then I suggest you use "display:flex"; Browser Support
<div class="align">
<div class="align-item">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
<style>
html,body {
width:100%;
height:100%;
}
.align {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.align-item {
max-width: 50%;
}
</style>
http://codepen.io/richardhealy/pen/zGwbLz