I am using image width:100% (or 50%) for img, this calculates height automatically. This is ok sometimes, but not in my case.
I need to display two images in a line with the same height, but original images has different height (so in the result two images also have different height).
<div class="col-md-7 horizontal-list-media">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%" class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%" class="img-responsive">
</div>
As both images have different height, then the resulted images also has different height. I do not wish this. How to make both images the same height? Take in mind that images should be responsive when screen size changes, thus I cannot simply add height property of both images, I guess.
I also cannot change height of original images. I need to make it with css, if not possible - then with jquery.
Basically, you are looking for a way to keep your images in same aspect ration (height is always the same in relation to width). For this, there is a neat little CSS hack using pseudo-element and padding-top. See DEMO for example.
markup:
<div class="col-md-7 horizontal-list-media">
<div class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png">
</div>
<div class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png">
</div>
</div>
css:
.img-responsive {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.img-responsive:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%; // this makes aspect ratio 16:9, adjust at will
}
.img-responsive img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#media (min-width: 640px) {
.img-responsive {
width: 50%;
}
}
you can do it like this
var height = $('.image-container').height();
var width = $('.image-container').width();
if (height > width) {
$('.image-container img').css({
width: "auto",
height: "100%"
});
} else {
$('.image-container img').css({
width: "100%",
height: "auto"
});
}
.horizontal-list-media {
overflow: hidden;
}
.image-container {
overflow: hidden;
width: 50%;
/*define your height here*/
height: 100px;
}
.image-container img {
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 horizontal-list-media">
<div class="image-container">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="" class="img-responsive">
</div>
<div class="image-container">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" class="img-responsive">
</div>
</div>
you can do it this way
<div class="col-md-7">
<div class="col-sm-6 bx-img img1"></div>
<div class="col-sm-6 bx-img img1"></div>
</div>
and style is
div.bx-img{
height: 200px;
background-size: cover;
}
.img1{
background: url("http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png") no-repeat scroll 0 0;
}
.img2{
background: url("http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png") no-repeat scroll 0 0;
}
or this way
<div class="col-md-7">
<div class="col-md-6 col-sm-6 col-xs-12" style="height:200px;background:rgba(0, 0, 0, 0) url('http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png') no-repeat scroll 0 0 / cover "></div>
<div class="col-md-6 col-sm-6 col-xs-12" style="height:200px;background:rgba(0, 0, 0, 0) url('http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png') no-repeat scroll 0 0 / cover "></div>
</div>
You were almost right. I have modified your code a bit. You have to set height of the parent div. Also use proper floating for positioning.
<div class="col-md-7 horizontal-list-media" style="height: 200px">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%;height: 100%; float : left" class="img-responsive">
<img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%;height: 100%; float : right" class="img-responsive">
</div>
Working example
http://www.bootply.com/rZirK5Z49w
Related
I try to build a webpage, with a screen-filling image. It should be horizontally scrollable and contain other, ~30% wide, images.
I came up with the code down below. Now my first image (bg_full.jpg) is oddly stretched.
Thank you in advance!
If any occur, I am sorry for mistakes in spelling or grammar.
<body>
<img class="big" src="./bg_full.jpg" alt="Reference image one">
<img class="small" src="./images/references/reference_1.jpeg" alt="Reference image two">
<img class="small" src="./images/references/reference_2.jpeg" alt="Reference image three">
<img class="small" src="./images/references/reference_3.jpeg" alt="Reference image four">
<!--
<div class="container">
<div class="row">
<div class="col-5">
<img class="grow big" src="./images/references/reference_1.jpeg" alt="Reference image one">
</div>
<div class="col-5">
<img class="grow small" src="./images/references/reference_2.jpeg" alt="Reference image two">
<img class="grow small" src="./images/references/reference_3.jpeg" alt="Reference image three">
</div>
</div>
<div class="row">
<div class="col-5">
<img class="grow small" src="./images/references/reference_4.jpeg" alt="Reference image one"><br>
<img class="grow small" src="./images/references/reference_5.jpeg" alt="Reference image two">
</div>
<div class="col-5">
<img class="grow big" src="./images/references/reference_6.jpeg" alt="Reference image three">
</div>
</div>
</div>
</div>
-->
</body>
and
body {
width: 500%;
margin: 0 0 0 0;
}
.big {
width: 100vw;
height: 100vh;
float: left;
max-height: 100%;
}
.small{
height: 100vh;
object-fit: cover;
white-space: nowrap;
display: inline-block;}
.row {
width: 100%;
}
If you want to remove the stretch effekt on your image, you should set either height, or width to auto. This means the picture does not stretch but has its fixed height or width, and its corresponding width or height.
So if you want your width to be 100vw:
.style{
width: 100vw;
height: auto;
}
or if you want your width to be 100vh:
.style{
height: 100vh;
width: auto;
}
Overlaying other images on the big image can be done by using position: absolute;
body {
width: 100%;
margin: 0 0 0 0;
}
.big {
width: 100vw;
height: auto;
max-height: 100%;
}
.small{
position: absolute;
top: 50%;
left: 50%;
height: 50px;
}
<body>
<img class="big" src="https://dummyimage.com/200x200" alt="Reference image one">
<img class="small" src="https://dummyimage.com/50x50/e4000f" alt="Reference image two">
</body>
So according to your Comment, i hope this will help you:
If you do not want to stretch the image, you need to set width: 100vw; and height: auto; this will make sure the picture will resize both axis equally. (or height: 100vh; width: auto; respectively)
Making a Image fill the full screen at all times is a lot easier when using the css property background-image, and not an actual image tag inside your html.
by setting background-size: cover you are making sure, that the aspect ratio of the picture stays as is. It will try to make the picture as small as possible, while trying to fully fill the background positioning area.
by setting background-position: 50% 50% you make sure, that the middle of the picture will always be in the middle of your container div.
body {
width: 100%;
margin: 0 0 0 0;
}
.wrapper{
width: 100vw;
height: 100vh;
max-height: 100vh;
background-position: 50% 50%;
background-image: url("https://dummyimage.com/200x200");
background-size: cover;
}
.big {
width: 100vw;
height: auto;
}
.small{
position: absolute;
top: 50%;
left: 50%;
height: 50px;
}
<body>
<div class="wrapper">
<img class="small" src="https://dummyimage.com/50x50/e4000f" alt="Reference image two">
</div>
</body>
I'd like to know, is it possible to change img dimensions while preserving its responsiveness on browser resize? Applying height and width doesn't work.
.wrap1 {
position: relative;
overflow: hidden;
}
.img1 {
height: auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="wrap1">
<img class="img1" src="http://lorempixel.com/600/400" alt="">
</div>
</div>
</div>
I created a responsive site but some of the images dont resize as I want them to.
See this screenshot:
#img1 {
width: 250px;
height: auto;
margin: auto;
display: block;
background-size: 20%;
}
<div class="row">
<div class="col-md-6" id="mision">
<img src="imagenes/MISION.png" id="img1">
</div>
<div class="col-md-6" id="vision">
<img src="imagenes/VISION.png" id="img2">
</div>
<div class="col-md-12" id="servicios">
<img src="imagenes/SERVICIOS.png" id="img3">
</div>
</div>
You're using a fixed width in the CSS for your image element, try changing to a percentage width, e.g.:
#img1{
width: 80%;
height: auto;
margin: auto;
display: block;
background-size:20%;
}
Then the width of the image should resize with your column.
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:
Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Consider using image as background in conjunction with background-size: cover.
I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>
try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.
you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.