I have a grid section in which I show posts and I display photos and text. However, no photos are the same size and that is inevitable so I try to make them the same size. I cut to the chase, the problem is the width:auto; stretches the image horizontally.
<div class="item_grid item2">
<div class="panel">
<div style="height:50px; overflow:hidden;">
<h4 class="recent-post-header">
Title
</h4>
</div>
<div style="height:300px; overflow:hidden;">
//Problem is Here
<img src="/Image" alt="img_preview" style="height:100%; width:auto; " /> /
</div>
<div style="height:100px; overflow:hidden">
<div class="clearfix post_date">
<span class="pull-left">DateCreated</span>
</div>
<p>Description</p>
</div>
<p> Read More <i class="icon-angle-right"></i></p>
</div>
</div>
Is there any way to allow the width of the image overflow and then hide it?
use
<img src="/Image" alt="img_preview" style="height: 100%; width: 100%; object-fit: cover" >
eventhoug ie doesnt support object-fit
Short and straightforward answers
style="height:100%; object-fit: cover;"
Related
i already found some questions regarding this topic but none of them could really help me solving my problem.
I like to build a simple Bootstrap grid looking like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8"> Some Text </div>
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="..." alt="Full Size Background Image" />
</div>
<div class="col-sm-8"> Some Text </div>
</div>
</div>
The col-sm-4-DIVs should contain a full size background image with the same height as the text and no padding.
Here's a photo of what I mean. I want the background image to cover the red area:
See Example
Any ideas how to do that?
Thank you very much for your help!!!
First option, you can set min-width:100% in your img tag:
img {
min-width: 100%;
}
Or Second option, you can set the image as a background and set it in the div that you want:
<div class="col-sm-4 full-img">
And the css:
.full-img {
background-image: url("....");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
use css to set the background image on the column
<div class="row">
<div class="col-sm-4" style="background-image:url('.....')">
content......
</div>
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
How do I change the width of the <a> tag below exactly as the test_small.jpg image width?
<div class="row">
<div class="col-md-5">
<a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
</div>
<div class="col-md-7">
...
</div>
</div>
I tried using:
<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">
without success.
Thanks.
EDIT: http://www.bootply.com/PGsq7xJeOt
You could just add an auto width. You will need to specify display: block for this to take effect.
.fancybox.thumbnail {
display: block;
width: auto;
}
I'd add class to that a .. for example: .customThumbnail
HTML:
<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
CSS:
a.customThumbnail {display: block; width: 200px;}
You can use any width here (within col-md-5), since your image is responsive - it will adjust.
Also, try resetting padding (as the "a" might have some padding around it).
a.customThumbnail {display: block; width: 200px; padding: 0}
Although, a JSFiddle would be the best :)
I have an active example on ToWho.
<div class="row">
<div class="col-md-5">
<a href="/assets/images/gallery/test.jpg">
<div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
<img class="img-responsive" src="test_small.jpg" alt="Small Images">
</div>
</a>
</div>
<div class="col-md-7"></div>
</div>
Why it's not working is hard to solve without a fiddle. The anchor shouldn't need anything special to make it take up the space of the div, especially since it's in a Bootstrap grid element.
Try to make a new class giving it width:100% or make it an inline style.
<div class="row">
<div class="col-md-5">
<img class="image-responsive" style="width:100%;" src="test_small.jpg"/> </div>
<div class="col-md-7">
...
</div>
</div>
Is it possible to use 2 responsive images side by side with same height with Bootstrap 3? At the moment the col-sm-4 hasn't the same height.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/400x400" />
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/800x400" />
</div>
</div>
</div>
Demo Fiddle: http://jsfiddle.net/u9av6/3/
Thanks!
try this:
<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>
<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
Here's a working version, with jsfiddle demo.
<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
Maybe your problem is that in your code, the padding is not considering.
Your 400px and 800px is nice, but with padding considering it's not good.
In this fiddle : http://jsfiddle.net/Lrc5t/1/ , with no padding, they keep the same height. But it's not nice without padding...
The padding in each .row is 15px left and right.
html:
<div class="row">
<div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
css:
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
UPDATE :
fiddle : http://jsfiddle.net/Lrc5t/2/
Without paddding is not nice so , just inverse in adding extra padding to right image :
<div class="row">
<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
.nopadding-two{
padding-right:45px !important;
}
ps : You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-one and text-right class are to delete...(I forgot)...
UPDATE AFTER COMMENT:
*Why 45px ?*
Image 1 is float:left so it has just the padding-right at 15px
Image 2 has padding left and right at 15px {=30px}
So in order do equality (to get same constraints) you need to transmit the total padding to image 2
To make the images displaying side by side, you need to do three things:
1st: make all your images responsive in the html file like this:
<div class="row">
<div class="col-xs-3 left-image" >
<img class="img-responsive" src="../img/fourthimg.jpg">
</div>
<div class="col-xs-9 right-image">
<img class="img-responsive" src="../img/firstimg.jpg" >
</div>
</div>
This is for putting two images side by side. You could have as many images as possible.
2nd: Inside your css, give the height to these images like this:
.img-responsive {display:block; height: 600px; width: 100%;}
The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.
3rd (Most important) : CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.
To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
This is a working example and explanation of how to put in images side by side using bootstrap!
Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.
<script>
setTimeout(function () {
equalheight('.portfolio-item');
}, 3000);
function equalheight($that) {
$minHeight = 0;
$($that).each(function (index) {
$thisHeight = $(this).children('.portfolio-link').innerHeight();
if ($minHeight == 0) {
$minHeight = $thisHeight;
} else {
if ($minHeight > $thisHeight) {
$minHeight = $thisHeight;
}
}
});
$($that).children('.portfolio-link').css('max-height', $minHeight);
$($that).children('.portfolio-link').css('overflow', 'hidden');
}
</script>
My html is
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-01.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-02.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
if you want constant height, should add these properties:
height: 200x ; # any constant height
object-fit: cover;
Or else you want width constant, should add these properties:
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, fixed the problem of stretching up of the image in my case.
I have code like this:
<div class='outer'>
<div class='imgwrapper'><img /></div>
<div class='caption'>This is a long caption that should wrap...</div>
</div>
What I want is for the outer div to be the width of the image so that the caption under it wraps to the width of the image.
The images are all different sizes but the size cannot be accessed in code to give absolute pixel sizes. The css has to work for different sizes.
I cannot change the structure of the divs.
Can this be done?
Try this:
HTML
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" />
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:200px; height:200px;"/>
<div class="caption">
Caption
</div>
</div><br />
<div class="box">
<img src="http://static.howstuffworks.com/gif/moon-landing-hoax-1.jpg" style="width:75px; height:75px;"/>
<div class="caption">
Caption
</div>
</div>
CSS
.box {
overflow:hidden;
background-color:#ddd;
display:inline-block;
}
img {
padding:10px;
}
Demo
http://jsfiddle.net/andresilich/8Bsgg/1/