I have a bootstrap column defined as follows:
<div class="col-md-4 limit">
<img id="myImage" src="" class="img-responsive"/>
</div>
<style>
.limit {
max-height:500px;
overflow:hidden;
}
</style>
The source of the image is obtained programatically so I do not know in advance the height or width of my image. What I want to do is that the image in this column whose height is limited appear completely inside of the div. With the img-responsive class I have achieved the image to horizontally fill my column, however, as this class also sets the height to auto, most of the time this causes the image to overflow and be hidden. I do not want my image to overflow in any way.
So, lets say that my column measures:
Width: 300px (defined by bootstrap)
Height: 500px (.limit)
And my image dimensions are:
Width: 600px
Height: 1500px
The current configuration makes the image shrink to 300px x 750px. As its container is set to only 500px, this causes the last 250px to be lost inside the overflow. I would like to image instead to be resized to 200px x 500px in order for it to completely into the containing div
How can I do this?
Thanks!
Try this:
<div class="row">
<div class="col-md-4">
<div class="limit">
<img src="images/yourimage.png" alt="" />
</div>
</div>
</div>
<style type="text/css">
.limit{
width: 300px;
height: 500px;
max-height: 500px;
overflow: hidden;
}
.limit img{
width: 100%;
height: 100%;
}
</style>
You could try to inherit the height or the width of the parent div (as both would not contain proportions). This could only work if you have the same type of img (all portret or landscape). Other solution is to calculate the dimensions based on the max width/height of the img in your program language. Pick the one that matches the condition (both var <= max value). Then echo the solution in your html.
#Luis Becerril I normally used this plugin with those type of issues. Please try this. If may suit to your requirement. jQuery Image Center
Simplest way in Bootstrap 4
<div class="row">
<div class="col-md-4">
<img src="images/yourimage.png" alt="" class="w-100" />
</div>
</div>
Related
I have a laravel site that loads product images into a grid-container--fit row through a #foreach loop. The images are all sorts of different sizes, some are portrait and some are landscape. The issue is that, because the grid container and the grid-elements are responsive (a percentage of the viewport width) the images are scaled inconsistently.
For example, I have images that, full size, are 3 x 2, 5 x 9, and 8 x 10. When they're loaded into the responsive grid they pretty much are all scaled to 25% of the view port width. The resulting 'look' of the images in the grid displays the 5 x 9 images larger than the 8 x 10 images at scale.
The distortion is more extreme if you consider portrait and landscape images of the same size. For instance, 5 x 7 and 7 x 5. the landscape images are scaled smaller than the portrait ones because they're all trying to fill a row according to a fixed minmax pixel width.
It can easily be rectified by a table structure rather than a responsive grid, but this is unacceptable!
here's the PHP loop
<div class="product-grid-container grid-container--fit">
#foreach($products as $product)
<div class="grid-element">
<a href="/product/{!!$product->id !!}">
<img src="{{ asset($product->image) }}">
</a>
</div>
#endforeach
</div>
and here's the CSS
.product-grid-container {
display: grid;
max-width: none;
}
.grid-container--fit {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-element {
padding: 5%;
color: #fff;
text-align: center;
}
.grid-element img {
max-height: 300px;
max-width: 300px;
object-fit: contain;
}
This is more of a design problem than a code one. The grid is working as intended, but your desired outcome is not a regular grid. Flexbox would be more in line with what you are trying to achieve, but another problem is how to scale your images without constraining them, and still have a proper look and feel. As long as you are forcing a max-height and/or max-width, the images will be shifted to a different scale depending on their original proportions. For that, you would provably need to know and/or control the dimensions of the original images, so that they have a nice enough proportion between each other. Then you could do something like this:
.product-grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.grid-element {
padding: 24px;
}
.grid-element img {
max-width: 100%;
object-fit: contain;
}
<div class="product-grid-container">
<div class="grid-element">
<img src="https://picsum.photos/400/200">
</div>
<div class="grid-element">
<img src="https://picsum.photos/250/450">
</div>
<div class="grid-element">
<img src="https://picsum.photos/400/500">
</div>
<div class="grid-element">
<img src="https://picsum.photos/250/350">
</div>
<div class="grid-element">
<img src="https://picsum.photos/450/250">
</div>
</div>
grid requires that spanning through rows or columns is to be set for each element, if you have no idea of the many rows or columns each img needs to make a patchwork, grid (display+grid-template-columns) won't be of any help.
column-width from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns could help :
CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.
calc() can also help here to mimic responsiveness sizing the columns.
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
Demo below or a codepen to play with
div {
column-width:calc(100px + 10vw);/* mimic a bit minmax , tune to your needs */
padding-left:2.5%;
margin:0;
}
img { width:90%;
margin:5% 0;
}
<h1> column css, resize window's width to check behavior</h1>
<div>
<img src="http://dummyimage.com/100">
<img src="http://dummyimage.com/100x200">
<img src="http://dummyimage.com/150x200">
<img src="http://dummyimage.com/100x250">
<img src="http://dummyimage.com/300x200">
<img src="http://dummyimage.com/350x200">
<img src="http://dummyimage.com/100x120">
<img src="http://dummyimage.com/100x280">
<img src="http://dummyimage.com/200x200">
<img src="http://dummyimage.com/170x200">
<img src="http://dummyimage.com/100x180">
<img src="http://dummyimage.com/150x200">
<img src="http://dummyimage.com/100x250">
<img src="http://dummyimage.com/300x200">
<img src="http://dummyimage.com/350x200">
<img src="http://dummyimage.com/100x120">
<img src="http://dummyimage.com/100x120">
<img src="http://dummyimage.com/100x280">
<img src="http://dummyimage.com/200x200">
<img src="http://dummyimage.com/170x200">
<img src="http://dummyimage.com/100x180">
<img src="http://dummyimage.com/150x200">
<img src="http://dummyimage.com/100x250">
</div>
It can be a compromise, else, there is the masonry script for what you want to do.
I have a web application layout like this, styled with Bootstrap:
------------------------
| Header |
------------------------
| Display Area |
------------------------
The Header is a collection of control elements (mostly buttons) and therefore almost of same height.
The Display Area contains the following:
<div class="row">
<div class="col">
<img class="img-fluid" src="http://localhost/api/currentImage" />
</div>
</div>
http://localhost/api/currentImage returns an image. The image's size always differs: sometimes the width is bigger than height, sometimes vice versa.
Now I'd like to scale the image in that way that it uses as much as possible of the available Display without "overflowing". By overflowing, I mean that there is never a need to show a horizontal or vertical scroll bar because the image is too wide or too high. Right now, <img class="img-fluid" ... only scales the width correctly.
How can I achieve this using Bootstrap/CSS?
Bootstrap will let you resize images with its img-fluid class, but if you need to make the image cover the entire space you would have to write your own CSS, you could make use of the object-fit property to set the image to fill the container, while maintaining its aspect ratio and clipping off if necessary;
As you can see in the example below, the image is narrow, but it will fill the entire container even if it has to expand to do so.
EDIT: Included two more examples with fill and contain so you can see how their behavior changes.
header {
border: 1px solid red;
padding: 10px;
}
section {
border: 1px solid blue;
}
img {
height: calc(100vh - 20px);
width: 100%;
/* This is just to remove a blank space at the bottom of the image */
display: block;
}
img.cover {
object-fit: cover;
}
img.contain {
object-fit: contain;
}
img.fill {
object-fit: fill;
}
<header>
This is a header
</header>
<section>
<img class="cover" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="contain" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="fill" src="https://via.placeholder.com/200x700" />
</section>
Bootstrap has a predefined classes for responsive image. Check the following class,
.img-responsive Makes an image responsive (will scale nicely to the parent element)
<div class="row">
<div class="col">
<img class="img-fluid img-responsive" src="http://localhost/api/currentImage" />
</div>
</div>
`
can you help me to fix this layout: http://imgur.com/a/kTMao
I'd like the grid will fill totally (hoizontally and vertically) its parent div without show me the outermost scrolbar(the window scollbar)
The only scrollbar that i'd like to see are the those of the grid
the page has a kendoSplitter in the middle
this is my markup
<body>
<img src="images/logo.png" />
<h1>Archivio documentale</h1>
<div id="horizontal" style="height: 100%; width: 100%">
<div id="left-pane">
<div class="pane-content" style="width:390px;">
<!-- LEFT SIDE CONTENT initial fixed width -->
</div>
</div>
<div id="main-pane">
<div class="pane-content">
<div id="mainGrid"></div>
</div>
</div>
</div>
</body>
You could use Viewports. There is vh (View Height) and vw (View Width). vh takes the height of the window dinamically, and vw takes the width of the window also dinamically.
Therefore, by applying the following:
div{
height: 100vh;
width: 100vw;
}
Your grid would always fit 100% no matter what.
Example: http://codepen.io/diego-fortes/pen/oYKpqK
I hope it helps :)
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
QUICK ANSWER
Use multiple NOT NESTED .containers
Wrap those .containers you want to have a full-width background in a div
Add a CSS background to the wrapping div
Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
DON'T USE NESTED CONTAINERS
Many people will (wrongly) suggest, that you should use nested containers. Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
HOW IT WORKS
div is a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
If a basic grid .container has some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
Direct child of a body
Direct child of a basic div that is a direct child of a body.
By "basic" div I mean div that does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block; CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
Bootstrap itself is using the same approach
...All over it's own website and in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
This is how you can achieve your desired setup with Bootstrap 3:
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluid part makes sure that you can change the background over the full width. The container part makes sure that your content is still wrapped in a fixed width.
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to #Typhlosaurus), solved with this js function, calling it on document load and resize:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
You can find documentation here:
https://getbootstrap.com/docs/4.0/utilities/sizing/
If you can't change the HTML layout:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Demo: http://www.bootply.com/tVkNyWJxA6
Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Here is a example: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Instead of
style="width:100%"
try using
class="col-xs-12"
it will save you 1 character :)
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; } in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center> closes a <center> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
content and image separate: http://jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
I would use two separate 'container' div as below:
<div class="container">
/* normal*/
</div>
<div class="container-fluid">
/*full width container*/
</div>
Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.
I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).
In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
#RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
#section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
This must work (Mobile phone as well as Desktop screen):
class: alignfull and class: img-fluid will do the magic.
<div class="alignfull">
<img class="img-fluid" style="background-size: cover;
background-position: center ;
background-repeat: no-repeat;
height: auto;
min-width: 100%;
width: -moz-available; "
src="{{ $image->image }}" alt="An image">
</div>