I got bootstrap col-md-1 that contains an image inside. Moreover, that column is wrapped by content div with paddings.
The problem I'm not okay with is that this image is pretty small. I would like it to be with the size at least as the original one has,
yet it should be responsive.
How can I do this? Thanks in advance!
My Codepen
HTML
<div class="content">
<div class="row">
<div class="col-md-11 first-column"></div>
<div class="col-md-1 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 100px;
}
One of the 'blanket' styles that BootStrap ships with is this:
img {
max-width: 100%;
}
This essentially means that images won't go wider than their parent containers / elements. So if your col-md-1 has a width of 97.5px (assuming you're using a normal 1170px container?), your image won't be bigger than 97.5px on viewports > 992px.
Try experimenting with different sized columns:
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
Or, for larger viewports, try appending another class to your wrapping container and overrides BootStrap's native container class:
<div class="container container-custom">
Then style is as follows:
#media (min-width: 1420px) {
.container.container-custom {
width: 1390px
}
}
Doing this will ensure your column widths remain proportionate to your container size (they are percentage based after all) and most importantly, you're not overwriting BootStrap!
You'll also notice I've wrapped the above class in a media query. This is so viewports > 1420px have the 1390px container with spacing either side (due to container's margin-left: auto and margin-right: auto which center it in the viewport).
Related
I am using a container with a row construct to make a header. I would like for the leftmost column to have an image. However, whenever I add an image it gets added full sized. I would like it to be limited to the set size of that column.
This is my current HTML code:
.logo {
max-width: 100%;
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" >
<div class="container">
<div class="row">
<div class="col-xs-1">
<div class="image-container">
<center>
<img src="https://i.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt="test" class="logo">
</center>
</div>
</div>
<div class="col-xs-10">
<h2><center>TEST HEADER</center></h2>
<h4><center>TEST SUBTEXT</center></h4>
</div>
<div class="col-xs-1">
<center>wowow</center>
</div>
</div>
</div>
</div>
I tried adding the in my CSS file but it did not change anything.
How can I have it such that the image follows the set size of the container?
Try adding the below css:
.image-container .logo{
width:100%;
}
The image is taking the full size of the col-xs-1 column. Just it is taking padding from left and right which all col- classes have.
If you want to make image a little bigger, then define its height (or width any one ) in px.
like the below:
.image-container .logo {
width: 100px;
}
I am following my previous question that has two boxes, that have two images (can be vertical or horizontal), the issue is the height of boxes are fixed and when I change the window screen in some screen sizes the images bypass the border of the boxes.
I checked answers of these questions 1 and 2 but did not help much.
DEMO
CSS
.items { */
position: relative;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 0px;
text-align: left;
background-color: red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 1%;
height:260px;
}
.col-md-12.col-xs-12.btn>a>img {
float: right;
width: 100px;
height: 50px;
}
.col-md-12.col-xs-12.my-col {
padding-left: 100%;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.btn {
float: right;
bottom:0;
margin-right:-12px;
margin-bottom:-6px;
position:absolute;
right:0;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="30%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="25%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
</div>
</div>
</div>
First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.
Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.
https://jsfiddle.net/6y4uf16y/84/
What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.
The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.
Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.
If this answer solves your problem, don't forget to mark it as the correct solution.
Cheers
Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.
You have to add class
.col-md-12 >a>img.btn {
float: right;
width: 100px;
height: 50px;
}
because .col-md-12.col-xs-12.btn>a>img is not applying to any of your given HTML div content
Is it a design requirement that the images get wider as the boxes get wider? If so, the only way to keep the images within the boxes is to increase the height of the boxes as you increase the height of the images.
If it's not a requirement that the images scale up, then you can see my solution here: http://jsfiddle.net/6y4uf16y/75/
All I did was remove the explicit widths from your images (the first was width="25%" and the second was width="30%") and instead used CSS to control the scale by limiting the max-height of the images. .items img {max-height:100px;}.
Since you have a fixed height and need to keep the images inside the boxes, you know for a fact that also have a fixed maximum height on the images
I am not sure if you can have line break on T1 & T2, otherwise you can do this
img{
max-height:170px;
width:auto
}
DEMO
i agree with #Bhavin Solanki and may be the one thing i will suggest that try to give the
width: 100px;
height: 50px;
in to percentages Or else you can go with Media queries for the particular image selectors that will help you to manage a lot
Your HTML Bootstrap code isn't totally correct:
You can't nest a .col-md-12 class inside a .col-md-3 class not
in my knowledge at least.
Your .rows classes are not always well positioned within the code
see the fiddle link that i prepared below.
I tried to do my best to understand what you want to achieve with your code i also ordered tags within your code so that your divs fit the window size regardless of its width.
EDIT
Try to define the width of your image with vw unit (width:15vw;) That will keep the image from crossing the containing item.
I illustrated an example for you here :
http://jsfiddle.net/merhzqwg/65/
Hope it helps.
OK this is the thing, your code is not very clean. there are some errors as well
for eg: you have used the id="imageresource" twice. An id can ONLY be used once on a single page. Very Important.
but i will provide a quick fix for this.
by default bootstrap adds max-width: 100%; height: auto; to the class img-thumbnail to override that what i have done is i have added a class to both of the images img-sale.
<img class="img-thumbnail img-sale" id="imageresource" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong" width="30%" style="margin-left: 30px;" />
and added the following css:
.img-sale {
max-height: 170px;
width: auto;
}
http://codepen.io/anon/pen/OVwrpJ?editors=110
http://jsfiddle.net/6y4uf16y/82/
but the rest of the code is not recommended to proceed with.
I'm working on a website project where in the header section I have a grid of 6 images (2 rows with 3 images in each). It's not a problem to make them responsive (kinda "liquid") with max-width:100% and height:auto, however this website should be linked with some admin tool in the future, so the end user(s) could upload their own images.
Hence, I need to understand how keep these two rows of images responsive but at the same time give them a fixed height (in this case they should be 220px). When I crop the images and make them all equal in height (using Photoshop), everything works fine, but as soon as I use images with different height values, the grid starts to break. Is there any known workaround for this?
Thanks in advance!
Use percents and #media
Example :
#media only screen and (min-width : 320px) {
img {
width:40%;
height:60%; /*Images should be bigger in small devices*/
}
}
#media only screen and (min-width : 480px) {
img {
width:30%;
height:55%;
}
}
Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.
max-height is another choice.
Well, let's see if I understood good enough your question (my bad english, not yours).
If yoy want 2 rows, 220px height each with 3 images each filling the width of the row while keeping the same height as the parent, the problem you may have is that the images will distort to adapt to their responsive parent container.
This may not work for you as even if your images are simillar in aspect ratio (height x width) once the window width is small (responsive) they will get distorted too much.
Here is an example: I've use different sizes images some horizontal and some vertical so it can be easier to understand.
Basic html:
<div class="header">
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
</div>
Please notice that the row is 240px insteed of 220 just so you can see easily the row (with red background) and I add for the same reason a white border to the image containers.
FIDDLE
The option I would try though is to make the images fit into the container without distortion, they will fit in height OR in width, but of course, they will leave space at the sides if it fit height or on top and bottom if fit in width but at least the images will be always centered in the container:
the green color is the background of the images container:
FIDDLE
There may be better options but without the help of jquery I can't help you more
If your goal is to keep the images (or their container's) height fixed, that will mean that the images will not be stretching or contracting in a fluid way. Given that this concept is contradictory in practice, I will instead show you a 'responsive' solution that comes from making container elements themselves responsive rather than instead of the images.
The case you're referring to (2 rows 3 images) sounds like a great place to implement a cascading images look-and-feel. When the page width shrinks the images will float under each other whereas viceversa when the website width is stretched; this in essence achieves a fluid and responsive functionality without affecting the image heights themselves. The below code should apply the 'building blocks' you'll be needing for in order to achieve this effect... granted there is a lot of custom work you can do here (like using background: cover, instead of img tags as suggested in the comments). Take a look and let me know if this helps you get closer to what you're trying to achieve.
HTML
<div class="wrapper bg-purple center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
<div class="clear-both"></div>
<div class="wrapper bg-cyan center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
CSS
.wrapper {
display: table;
}
.img-container {
height: 50px;
padding: 2px;
}
.center-div {
margin: 0 auto;
}
.left {
float: left;
}
.clear-both {
clear: both;
}
.bg-purple {
background-color: purple;
}
.bg-cyan {
background-color: cyan;
}
#media only screen and (max-width: 450px) {
.left {
clear: both;
}
}
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
so confused at the moment I am trying to place a social icon below a h3 tag that is in the same bootstrap row however having a nightmare doing it.
I am trying to create this effect:
However I cant seem to get those icons below the phone number element when they are in the same row, they just sit on the same line.
The logo is also in the same row as the phone number element so if I created another row and placed the icons in that row they appear to far down the page.
Here is an example of my code:
HTML
<div class="container hidden-sm hidden-xs">
<div class="row">
<div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<div class="phone-div col-md-6 col-sm-6">
<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i> 01429 7654287</h3>
<img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
</div>
</div>
</div>
CSS
.phone-number {
color: #fff;
margin-top: 20px;
display: inline-block;
font: 600 2em 'Open Sans', sans-serif;
float: right;
}
.facebook-icon {
display: block;
height: 30px;
float: right;
}
/* main logo */
.logo-custom {
height: 75px;
}
#media only screen and (max-width : 1199px) {
.logo-custom {
height: 61px;
}
}
Any tips on what I might be able to do to create this effect?
Thanks, Nick :)
Try this Code:
<div class="container hidden-sm hidden-xs">
<div class="row">
<div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<div class="phone-div col-md-6 col-sm-6">
<div class="col-md-12 col-sm-12">
<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i>01429 7654287</h3>
</div>
<div class="col-md-12 col-sm-12">
<img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
</div>
</div>
</div>
</div>
Hope this may useful
I think you might be just over-complicating things in your own mind. Forget about Bootstrap for a minute, if you wanted to just make a page that has two elements stacked one on top of the other, then you'd make sure to use block elements (which means that they will take up 100% the width of the container they are in by default).
The thing is that your custom css is actually overriding this normal behavior because you are expressly setting the phone number to be display: inline-block; and making both elements use float:right. Just remove those from your css rules and you'll get your desired effect:
.phone-number {
color: #fff;
margin-top: 20px;
font: 600 2em sans-serif;
}
.facebook-icon {
display: block;
height: 30px;
}
If you want the items to align to the right, just add the Bootstrap helper class: text-right to the column div or add text-align: right to your css rules.
EDIT: Just a suggestion
Also, you can streamline your markup. If you want the entire container to be hidden on sm and xs devices, then all you have to have in your col classes is col-md-6. And, if you didn't want your container to be hidden at the xs and sm breakpoints, then all you would need is col-sm-6, because that alone would set the columns to be 50% for ALL viewports that are larger than 767px. Remember, col classes are additive. When you add a col class, it's like saying: "make this column this width from this viewport size and up until I tell you otherwise".