Im trying to have 3 images side by side in a flex container but the images are much too large and its stretching the page and creating a scroll bar.Tried a tip to use flex wrap but that didn't work.Should I just resize in photoshop?.
<section class="main-content">
<div class="image">
<img src="img/devil-ivy-can.jpg">
</div>
<div class="image">
<img src="img/krimson-princess-can.jpg">
</div>
<div class="image">
<img src="img/spiderwort-can.jpg">
</div>
</section>
.main-content{
display: flex;
}
div{
width:100%;
padding:10px;
margin:10px;
}
Try this
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
}
img {
width: 100%;
}
div {
flex: 1;
padding: 10px;
margin: 10px;
}
<section class="container">
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
</section>
hello i have try to solve your problem you can try this in your CSS code.
.main-content{
display: flex;
gap:10px
}
div{
width:100%;
gap:10px;
}div.image img{
width:100%;
object-fit:cover;
}
<section class="main-content">
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
</section>
in your css code at div selector i prefer using gap to give space between items than using padding and a margin
if you give the img width 100% it will fill the div.image and set object-fit with value cover. The CSS object-fit property is used to specify how an or should be resized to fit its container.
I want to make a nav bar in the footer with images. The footer needs to be 10% of the total screen and the images need to be within those 10% as well. Only I don't get the images scale according to the screen size and are way bigger. What am I doing wrong?
I am using Bootstrap 4 and I intent to make a mobile version of my website but it is not displaying good.
<div class="footer navbar row">
<div class="col-sm-2 menu_item">
<a href="#home" class="active">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: var(--primary-color-1);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
height: 10vh;
}
/* Style the menu blocks */
.menu_item {
position: relative;
padding: 2px 10px;
margin: 0px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
text-align: center;
text-decoration: none;
}
/* Style the images/icons of the links */
.menu_img {
height:100%;
width: 100%;
object-fit: cover;
}
responsive img's need width: 100%; to be responsive, you can control the image size with his container, for example:
<div class="img-container">
<img src="imgUrl"/>
</div>
img{
width: 100%;
}
.img-container{
width: 10%;
}
I found the solution. My structure is like
<div class="footer">
<div>
<a>
<img>
</a>
</div>
</div>
The footer div needs to be height:10%. But I need to set the height of all the other elements to 100%(which I didn't do before). Otherwise it will extend outside those. 'borders'
<div class="testt">
<div class="test">
<img src="4.jpg">
test
</div>
<div class="test">
<img src="5.jpg">
test
</div>
<div class="test">
<img src="7.jpg">
test
</div>
<div class="test">
<img src="6.jpg">
test
</div>
If you can help me for the pictures to be one line and the anchor beneath them nicely centered and also to be responsive for all devices
You can use display: flex; on the parent and that will put everything on one line, give it a relative width so that it scales with the viewport, assign text-align: center; to the .test divs to center the contents, and give the img a max-width: 100% so that it scales with the parent size.
.testt {
display: flex;
width: 90%;
margin: auto;
}
.test {
text-align: center;
}
.test img {
max-width: 100%;
display: block;
}
<div class="testt">
<div class="test">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
test
</div>
<div class="test">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
test
</div>
<div class="test">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
test
</div>
</div>
I am working on a project where we are using blocks which contains text. The blocks have a header image. The result should be something like the picture below.
The problem I am facing is that the image is set using the CSS background-url propertly, which makes the image go beneath the text instead of being displayed as a header image. I am using the code below, for the purpose of this question in the style of the picture above:
.block {
background-color: #fff;
border-radius: 5px;
padding: 20px 40px 20px 40px;
margin: 10px 10px 10px 10px;
}
.header {
background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
background-size: contain;
height: 300px;
}
This creates the <div> that I need, however as you can see on the picture below, it does not give me the result I want.
I have tried setting the .header to display: block, but this did not change anything. I have also tried using margin to force the text to be displayed under the image, which did not work either. Can someone help me to get the result I want?
The relevant HTML is down below.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
Change your html to below:
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header">
</div>
<div class="block">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
You have put block and header in the same div, so your background-color in .block class is overriden by background of .header class.
Here is fiddle.
If you really want to use a background image, consider using % padding. That also helps the layout stay responsive. Also, cover forces the background image to cover the entire div, so you don't want that at all.
.block {
background-color: #fff;
border-radius: 5px;
padding: 20px 40px 20px 40px;
margin: 10px 10px 10px 10px;
}
.header {
background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 32%;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
I keep my original suggestion of using an <img> instead of a background image. It is both easier to implement and more correct semantically.
I've tried to simulate the result in your image below:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row content">
<img class="header_img" src="https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png" />
<div class="col-md-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.header_img{
width: 100%;
height: auto;
}
.content{
background-color: white;
border-radius: 5px;
margin-top: 20px;
overflow: hidden;
}
Demo: http://jsfiddle.net/bh7Lh42k/1/
I'm using the bootstrap framework and trying to get an image centered horizontally without success..
I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
What's the easiest method to get an image centered relative to the page?
Twitter Bootstrap v3.0.3 has a class: center-block
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
Just need to add a class .center-block in the img tag, looks like this
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
In Bootstrap already has css style call .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
You can see a sample from here
The correct way of doing this is
<div class="row text-center">
<img ...>
</div>
Update 2018
The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>
Twitter bootstrap has a class that centers: .pagination-centered
It worked for me to do:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
The css for the class is:
.pagination-centered {
text-align: center;
}
You could use the following. It supports Bootstrap 3.x above.
<img src="..." alt="..." class="img-responsive center-block" />
Assuming there is nothing else alongside the image, the best way is to use text-align: center in the img parent:
.row .span4 {
text-align: center;
}
Edit
As mentioned in the other answers, you can add the bootstrap CSS class .text-center to the parent element. This does exactly the same thing and is available in both v2.3.3 and v3
Works for me. try using center-block
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
I need the same and here I found the solution:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
You can use margin property with the bootstrap img class.
.name-of-class .img-responsive { margin: 0 auto; }
I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
Seems we could use a new HTML5 feature if the browser version is not a problem:
in HTML files :
<div class="centerBloc">
I will be in the center
</div>
And in CSS file, we write:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And so the div could be perfectly center in browser.
Just use following bootstrap class to fix it
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
You should use
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
#media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
#media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}
I created this and added to Site.css.
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
A lot of the above options didn't work for me.
However, this worked!
<div class="container">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
</div>
</div>
IN Bootstarp 5.0
Use
.mx-auto .d-block
You could change the CSS of the previous solution as below:
.container, .row { text-align: center; }
This should center all the elements in the parent div as well.