I have images with the same height but different width.
How to show them in a row with the same height and make it responsive.
For example, I want to show 3 images in one row so that each image has the same height.
<div class="row">
<div class="float-left">
<img src="img1.png" class="??">
</div>
<div class="float-left">
<img src="img2.png" class="??">
</div>
<div class="float-left">
<img src="img3.png" class="??">
</div>
</div>
Pick a height and width e.g 3 then write <img src="img.png" height="3" width="3">
Semi-responsive solution.
Use media queries to have different height for each screen size.
It is not fully responsive and images will not take the full width of the container. But each image has the same height - a fixed height for each screen size.
HTML (HAML):
.row.my-list
.card.d-flex.align-items-stretch.align-self-center
%img.card-img-top{:src => "img1.png"}/
.card.d-flex.align-items-stretch.align-self-center
%img.card-img-top{:src => "img2.png"}/
.card.d-flex.align-items-stretch.align-self-center
%img.card-img-top{:src => "img3.png"}/
CSS (SASS):
.my-list{
.card{
border: 0;
}
img{
#include media-breakpoint-down(sm) {
height: 40px;
}
#include media-breakpoint-up(md) {
height: 100px;
}
}
}
Related
I have a layout that has a lot of images and in order to make my layout responsive, I am using percentage values for the width and height. Each image is nested into a div tag and the images are given a width and height of 100% of their parent's width and height.
Using media queries, depending on the screen size, I am changing the width of the divs that contain each images as follows:
When only 2 images can fit on the screen: 50% width each div that contains an image
When only 3 images can fit on the screen: 33.33% width each div that contains an image
When only 4 images can fit on the screen: 25% width each div that contains an image
When only 5 images can fit on the screen: 20% width each div that contains an image
etc..
But those images look pixelated when they get bigger, they loose quality... How do I make them not loose quality and not look pixelated when they go from having a 20% width to having a 50% width?
Do I use the srcset technique? What responsive image technique do I use to allow my images to scale to any size without getting pixelated?
If I understand correctly flex-grow will do the job for you.
Whenever you have 1 image it will force it to be 100% width, 2 images 50% and so on and so forth. You don't need a media query for this, unless you want to achieve different layouts per your wish, of course.
Here is an example on codepen, you can try adding/removing images to see how it fits.
.flexbox .item {
flex-grow: 1;
}
.flexbox {
display: flex;
border: 2px solid #86835f;
margin-bottom: 2em;
max-width: 100%;
}
.item {
box-sizing: border-box;
background: #86835f;
color: #ece69c;
margin: 0.25em;
}
img{
max-width: 100%;
}
<div class="flexbox flexbox-grow-1">
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
</div>
If you want to retain the original sizes of the images and make it responsive, there is a cool way to do this!
-> You can use a flexbox. (That is the secret)
Run the following code below and open the code in full screen. Then change your screen width by minimizing the screen and watch how responsive the images are using flexbox.
The magic down below is caused by a CSS property known as flex-wrap: wrap; Which will wrap all the images in a responsive container!
You can make something like this:-
.image {
height: auto;
width: 150px;
margin: 10px;
}
.container {
display: flex;
flex-wrap: wrap;
}
<div class="container">
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
</div>
If you resize the image they will align and be responsive!
I am trying to modify an existing page that I inherited - the page is using Bootstrap 3.3.7
The page generates HTML dynamically (the image URLs are being read from a database and the height and width of the images may be different) to display a list of images - sample HTML generated is shown below:
<div class="row">
<div class="col-xs-4 text-center">
<img src="..." height="900" width="1200" class="img-responsive center-block">
</div>
<div class="col-xs-8">
text content here
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<img src="..." height="640" width="640" class="img-responsive center-block">
</div>
<div class="col-xs-8">
text content here
</div>
</div>
The images are currently responsive, but I would like the images to display at a fixed height and width when the screen width is less than or equal to 768px. I know I need a media query of some type, but no matter what I try, I cannot seem to get the images to render with a fixed height on screens less than 768px.
Any advice / tips would be appreciated.
Have you tried something like that, you will need to change the width and heights
#media only screen and (max-width: 768px) {
.img-responsive {
max-width: 300px;
max-height: 300px;
}
}
Thanks to #LCarter -- sent me in the right direction...
Because the site was using the img-responsive class on various pages and I did not want to override the behavior on all pages, so I created the following:
.img_responsive_fixed_small {
display: block;
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 768px) {
.img_responsive_fixed_small {
max-width: 140px;
max-height: 140px;
}
}
works great - thanks again!
I've got 2 cards that stack in portrait but are next to each other in landscape. I'd like to have the 2 cards vertically aligned to each other in landscape. i.e. The text of the first card should be aligned to the middle of the image. I tried the flex option but that breaks in the responsive design. Little help. Thanks.
<div class="land6">
<header>
<h4>T++++</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="/Thumbs.jpg" width="100%" />
</div>
</div>
The css:
#media only screen and (orientation:landscape){
.land6{width:49%}}
If you do not want to use flex-boxes then you will need another approach:
#media only screen and (orientation:portrait) {
.land6 {
display: block;
width: 100%;
}
}
#media only screen and (orientation:landscape) {
.wrapper {
white-space: nowrap;
}
.land6 {
display: inline-block;
vertical-align: middle;
width: 50%;
}
}
.land6 img {
width: 100%;
}
<div class=wrapper>
<div class="land6">
<header>
<h4>Some header</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="http://www.wfn360.com/wp-content/uploads/2014/04/thumb.jpeg" />
</div>
</div>
<div>
If your style didn't change when you move from portrait to landscape so you don't need to put the media query here.
To make each card stack on each other, make it take full width of their parents by example: width:100% so it won't let the other cards stay next.
To make the text in the middle of the image, if you already stack it on each other, simply use text-align:center will solve the problem
I am trying to get two images of different widths to be the same height. I've saved the images at a size so that they appear at the same height when at full width (1140px) but you will notice when the browser gets smaller, the images don't stay the same height. I am really stuck! Any help would be much appreciated.
Here is the fiddle http://jsfiddle.net/jn7g1qxg/
Open to using java or anything!
html
<div class="wrap">
<div class="row">
<div class="col-66">
<div class="col-inner">
<img src="http://i58.tinypic.com/21jvj0y.jpg">
</div>
</div>
<div class="col-33">
<div class="col-inner">
<img src="http://i57.tinypic.com/alovbq.jpg">
</div>
</div>
</div>
</div>
css
.wrap {
max-width:1140px;
}
img {
max-width:100%;
}
.col-33 {
float:left;
width:33.3%;
}
.col-66 {
float:left;
width:66.6%;
}
.col-inner {
padding:0 20px;
}
Set the height in img
img {
max-width:100%;
height: 200px;
}
http://jsfiddle.net/jn7g1qxg/2/
I have rectangular, not necessarily square images.
Using Bootstrap's img-circle, I'd like to get circular crops, not elliptical/non-circular crops of these rectangular images.
How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.
JSFiddle to illustrate the non-circular behavior of non-square img-circle images.
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-12">img-circle test</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/400" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/400/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />
</div>
</div>
</div>
I see that this post is a little out of date but still...
I can show you and everyone else (who is in the same situation as I was this day) how i did it.
First of all, you need html like this:
<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>
Than your css class will look like this:
div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;
/* make it a circle */
border-radius:50%;
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
It is responsive circle, centered on original image.
You can change width and height not to autofill its parent if you want.
But keep them equal if you want to have a circle in result.
Link with solution on fiddle
I hope this answer will help struggling people. Bye.
I use these two methods depending on the usage. FIDDLE
<div class="img-div">
<img src="http://placekitten.com/g/400/200" />
</div>
<div class="circle-image"></div>
div.img-div{
height:200px;
width:200px;
overflow:hidden;
border-radius:50%;
}
.img-div img{
-webkit-transform:translate(-50%);
margin-left:100px;
}
.circle-image{
width:200px;
height:200px;
border-radius:50%;
background-image:url("http://placekitten.com/g/200/400");
display:block;
background-position-y:25%
}
You stated you want circular crops from recangles. This may not be able to be done with the 3 popular bootstrap classes (img-rounded; img-circle; img-polaroid)
You may want to write a custom CSS class using border-radius where you have more control. If you want it more circular just increase the radius.
.CattoBorderRadius
{
border-radius: 25px;
}
<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />
Fiddle URL: http://jsfiddle.net/ccatto/LyxEb/
I know this may not be the perfect radius but I think your answer will use a custom css class. Hope this helps.
use this in css
.logo-center{
border:inherit 8px #000000;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
}
<img class="logo-center" src="NBC-Logo.png" height="60" width="60">
You have to give height and width to that image.
eg. height : 200px and width : 200px
also give border-radius:50%;
to create circle you have to give equal height and width
if you are using bootstrap then give height and width and img-circle class to img
the problem mainly is because the width have to be == to the height, and in the case of bs, the height is set to auto so here is a fix for that in js instead
function img_circle() {
$('.img-circle').each(function() {
$w = $(this).width();
$(this).height($w);
});
}
$(document).ready(function() {
img_circle();
});
$(window).resize(function() {
img_circle();
});
You Need to take same height and width
and simply use the border-radius:360px;
You could simply use .rounded-circle bootstrap.
<img class="rounded-circle" src="http://placekitten.com/g/200/200"/>
You can even specify the width and height of the rounded image by providing an inline style to the image, which overrides the default size.
<img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />