I have this code:
<div id="mainDiv" style="text-align:center>
<img src="redFarm.jpg" style="width: 250px">
<img src="board.jpg" style="width: 750px">
<img src="blueFarm.jpg" style="width: 250px">
</div>
The board image is exactly at the center of the screen. Now, the other one are aligned to the as more to center as possible, and I want them to be as more to the borders (left and right) as possible. I have tried many combinations but no luck with any of them.
Can you guys give me a pointer?
Thanks
Try floating the images left and right:
<div id="mainDiv" style="text-align:center">
<img src="redFarm.jpg" style="float:left; width: 250px">
<img src="board.jpg" style="width: 750px">
<img src="blueFarm.jpg" style="float: right; width: 250px">
</div>
This puts the images at the top of the container; if this is a problem you can try specifying the height explicitly.
Related
I dont know if this is the right place to ask this question but I am really stuck on this part. Basically, I am trying to align my github stats side by side in the readme file.
I added this code in my readme file:
How can I make it so that the two cards align side by side? Something like this:
Any suggestions?
UPDATE:
I tried adding this but it still did not work:
<img align="center" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
<div style="display: flex; flex-direction: row;">
<img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>
Please see the CSS I added and changes to your HTML. Simply doing <img align="center" is not enough.
<div style="display: flex; flex-direction: row;">
<img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>
Inspected front-end and changed div styles to those suggested and it worked as expected. img
The difference in both box sizes annoyed also me. I tried the other proposal here but for some reason it didn't work for me(both in the same size on the same row). So, I did the following that has made them look much better, although they are not on the same line
### GitHub Stats
<div><img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api?username=Tsvetoslav88&theme=radical&show_icons=true&include_all_commits=true&hide_border=true" /></div>
### GitHub Languages
<div><img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Tsvetoslav88&theme=radical&langs_count=8&layout=compact&hide_border=true" /></div>
This is the solution that worked for me. Both images are about the same size and on the same line.
<div class='container'>
<img style="height: auto; width: 55%;" class="img" src="https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=blue-green" />
<img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=blue-green&langs_count=8&layout=compact" /></div>
</div>
img
Try this below:
Using the dir="auto" (which is used for text alignment) along with max-width 100% you should be able to center whatever you want.
<div align="center" dir="auto" <img style="max-width: 100%;" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img style="max-width: 100%;" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>
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;"
I am trying to create two columns of equal width, the left one containing text and the right one containing an image. I would like the image to resize down to the width of the column if the image width is greater than the column width, but would like the image to keep its original size if the image is less than the column width. I have tried the instructions in this question, but the image, if larger, will consume whatever space it needs, squishing the column on the left containing text. I am wondering if this has to do with how "table-cell" divs behave, or if it is a precedence issue where the browser will accommodate an image before text. My code looks something like this:
<div style="display: table; width:100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
Also, I am using FireFox as my browser to test. Thanks!
EDIT: I also tried an alternative method to get the same effect using float divs (code below). The problem is I would like the two columns middle-centered, and I cannot get the smaller float div to size to full height in the parent container, so the inner contents are top-aligned. However, the image does resize properly, which backs up my hunch that this problem is related to how "table-cell" divs behave.
<div style="position: relative;">
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<p>content</p>
</div>
</div>
</div>
</div>
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<img style="max-width:100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
</div>
</div>
Code was working fine in Chrome. This seems to be an issue only in Firefox as per this article:
http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/
Adding table-layout:fixed; to the div styled display:table; gives the results you're looking for- allowing the image max-width to work and respecting the cell widths.
<div style="display: table; width:100%; table-layout: fixed">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.png">
</div>
</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'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.
This is an image of what I want it to look like
I've thought about creating three divs with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: left; width: 100%" > </div>
<div style="float: left;">right aligned text </div>
</div>
Why not use the "text-align" property on the second div?
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: right; text-align: right;">right aligned text </div>
</div>
EDIT: You don't need a middle DIV for a spacing. You can simple use a percentage width for the two other DIVs and using float left and right you have a "buffer":
<div style="width: 500px;">
<div style="float: left; width: 45%;">left aligned text</div>
<div style="float: right; text-align: right; width: 45%;">right aligned text </div>
</div>
try this -
<div style="width: 500px;">
<div style="float:left">left aligned text</div>
<div style="text-align: right;">right aligned text </div>
</div>