Show the floating images as same height - html

Please check the code at http://jsfiddle.net/jfzZQ/
We are displaying two floating images dynamically next to each other. We are setting up the width of the images to 200px and not setting the height parameter.
As the images are of different proportions, the height of one image is longer than the other.
<style>
.img200 {width:200px;}
.credit {position: absolute; bottom: 8px; left: 8px;
width: 100%; color: #fff;font-size: 11px;}
</style>
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://images.theage.com.au/2012/12/19/3902461/art-353- svMESSI-300x0.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-11D1474C000005DC-964_634x664.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
<br />
<br />
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://nimg.sulekha.com/sports/original700/lionel-messi-2009-12-21-15-41-46.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://media.npr.org/assets/img/2013/06/12/messi122way_custom-74f98cf7a4148d6405ad71c75457f7a4f516a9c9-s6-c30.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
Is it possible to hide bottom part of one of the images, so that they both show as same height. In case 1, we would like to hide bottom part of the left image and in case 2 we would like to hide bottom part of right image.
Please guide. Thanks.

1)
Create 2 divs of equal height and set the images as their background
2)
Change of tactic .. background works but your images are too big. Lets overflow instead by adding this to the divs:
height: 200px; overflow: hidden;
http://jsfiddle.net/jfzZQ/1/
Notice i'm not fixing the height/width of the image. Only the width of the image is set as to keep the height/width proportions automatic. I'm just setting the height of the div and cutting it off with overflow.
3)
The solution from Mohammad seems fine to me
Did some css refactoring ..so don't know if you like it. If you prefer solution 3, be sure to give the creds to Mohammad & not me
http://jsfiddle.net/jfzZQ/5/

You need to set both pictures' width to auto, and their height to a specific value.
img {
width:auto;
height: /* make height same for both*/
}
That way, it will keep the proportions of both images and it will also make them smaller or bigger depending on the height. Make sure you don't add too much height, though, or the images will go to the next line.

Related

Flexbox, limit images heigh/width within space available

I have a fixed size wrapper consisting of:
Header that is sized to the whats inside
Footer that is fixed size
Content container that should use the remaining space of the wrapper
The problem occurs with images. I would like for images to resize to fit the content container both in height and width. Right now images overflow the wrapper in height.
Here is the code. The wide image is acting correct, resizing to fit, but the long giraf is not.
In the following fiddle overflow is set to scroll to debug. The endgoal is no overflow.
https://jsfiddle.net/sghp68r0/
A not so flexible solution would simply be to give the imageFit class a height like
img {
max-width: 100%;
max-height: 100%;
}
.imageFit {
object-fit: contain;
height: 150px;
}
But this I would rather avoid hardcoding the height.
My goal is that it looks like this (no overflow):
if i am right you want this. Please do let me know.
Drag the height in fiddle you see the images are adjusting with heigh.
Here is my fiddle link:-
https://jsfiddle.net/exa3y7w9/
<div class="wrapper">
<div class="header">
Sized to content <br />
Sized to content <br />
</div>
<div class="content">
<div class="imageWrapper">
<img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/wide-format-2839089_960_720.jpg">
</div>
<div> 2 images and some text that fills remaining space </div>
<div class="imageWrapper">
<img src="http://clipart-library.com/data_images/258951.jpg">
</div>
</div>
<div class="footer">
There is some text in fixed size container
</div>
</div>
So apparently you can fix overflow in flexbox by setting height of the containing div to 0 (for safari it should be min-height: 0). Have a look at this example. If you remove height breaks.
https://jsfiddle.net/oz20qgw9/
.content {
background-color: green;
flex:2;
height: 0; //THIS IS THE KEY!
}

Need to keep image (horizontal / vertical) in a fixed height div

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.

How to set width of the floating div relative to neighbour

I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.

How to crop and align images next to each other?

On this grammar page there's a main 590px X 183px image at the top and 5 121px X 137px images at the bottom, aligned horizontally next to each other:
The bottom images are a resized crop of the main image at the top. In the screenshot example, the 3rd image at the bottom is the resized crop of the image at the top, buses. If you click on the first bottom images (books) it will take you to a page where books is also the image at the top (like buses above).
All this long-but-hopefully-clear introduction, is to ask how can I horizontally-align the the bottom images as a resized crop of the images at the top?
Now the bottom images were cropped and resized offline, and then uploaded as new files. So to visit all the 5 pages linked to from the bottom images, one has to download 10 image files. But if I could resize and crop (and still have the images horizontally aligned), those would be just 5 files.
I tried margin-left (and height) to resize and crop:
<img style="height:135px; margin-left:-290px;" src="http://www.imparare-inglese.it/uploads/1/1/1/6/11169156/7674785.png"/>
<img style="height:135px; margin-left:-610px;" src="http://www.imparare-inglese.it/uploads/1/1/1/6/11169156/6647450.png"/>
But just as I set the margin-left on the 2nd img, the 2nd image goes over the first. How do I prevent that? What am I missing?
Example with tables: http://jsfiddle.net/EZnAg/
Place the image inside a div, apply a width, height, float:left, position:relative and overflow:hidden on that div containing the image, then absolute position the image as required. If the image needs a faux/css resize, apply that in css too.
* {
padding:0;
margin:0;
}
.panels {
float:left;
}
.placeholder {
width:200px;
height:200px;
float:left;
overflow:hidden;
margin:0 20px 0 0;
}
.placeholder img {
/*width:100%;*/
}
<div class="panels">
<div class="placeholder">
<img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" />
</div>
<div class="placeholder">
<img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" />
</div>
<div class="placeholder">
<img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" />
</div>
</div>
http://jsfiddle.net/seemly/PmUzY/
If you reinstate the width:100%; on the .placeholder img in my jsfiddle, hopefully this provides the effect you want, or at least gives you a head start?
cropped images are actualy new created images (from the original ones)with different aspect ratio. assuming that these images are totally different images(and not the same images just shown as width="smallpx" height=smallpx"), u can place them inside a div something like this
<div id="all_image contained" style="width: 300px;">
<div style="width: 100px; float:left">
<img src="images/img1.jpg" width="80px" height="50px"/>
</div>
<div style="width: 100px; float:left">
<img src="images/img2.jpg" width="80px" height="50px"/>
</div>
<div style="width: 100px; float:left">
<img src="images/img3.jpg" width="80px" height="50px"/>
</div>
</div>
in order to cropping, u have to use jquery script, to create new images with small aspect ratio and dimensions....
or else if u want to display the same large images, in small thumbnail size, then u may use a fixed size div and set overflow as hidden

Simple CSS MasterPage layout

I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):