We Keep Coding

Make two images same height without hardcoding?

Here I have two images. I have the widths of these two img elements exactly how I want it. The gutter between these two elements and their container is exactly how I want it as well.
After applying vertical-align: top, I noticed that both of these images automatically determine their own height based on the aspect ratio of the source image. As you can see this means the images end up having the same widths (which I defined explicitly) but different heights by a matter of a dozen pixels or so:
I was wondering if there is a way to give both of these images the same height without switching them to be background-image's. Also, if this image feed is 'dynamic' how could I explicitly define the height while not knowing the aspect ratio of the image in question?

So the problem is that if you set the width and height the same on two differently sized images, at least one of them will be distorted.
You could quite easily fix this, as long as the images are relatively similar in size. The idea is, you surround the image with a div and give the div the height and width instead of the image. Then give it the CSS overflow: hidden; and it will crop off the extra bit of the image. You may also need to give it display: inline-block; to get the div's next to each other.
div {
display: inline-block;
height: 200px;
width: 200px;
overflow: hidden;
}
<div>
<img src="http://via.placeholder.com/200x200">
</div>
<div>
<img src="http://via.placeholder.com/200x240">
</div>
Or if you want the image vertically centered:
div {
display: inline-block;
height: 200px;
width: 200px;
overflow: hidden;
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div>
<img src="http://via.placeholder.com/200x200">
</div>
<div>
<img src="http://via.placeholder.com/200x240">
</div>

I recommend using aspect ratios. Format your images to be the same aspect ratio at the minimum before uploading. The other option would be converting to BG images if you can't pre-format.
.container {
padding-top: 100%; /* 1:1 Aspect Ratio */
//padding-top: 75%; /* 4:3 Aspect Ratio */
//padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

I think another approach would be setting image height and use actual image content as background image with background-size:contain; this way your image will not be distorted and will always fill the size.
<img src="blank.gif" style="background-image:url(myImage.jpg);background-repeat:no-repeat;background-position:center center; background-size:contain;height:300px;">

If I were you, I would utilize a CSS method of wrapping your images in a container that has overflow set to hidden which will hide the hanging off pixels.
If you feel people will miss out on part of the image, you could use a css animation like I did below when you hover over it. I use translate3d because it utilizes GPU acceleration in browsers.
main {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
width: 500px;
}
.img-wrap {
overflow:hidden;
height: 15rem;
width: 15rem;
}
.img-wrap>img {
max-width: 500px;
}
.img-wrap:hover>img {
animation: pan 5s;
}
#keyframes pan {
from {transform:translate3d(0,0,0);}
to {transform:translate3d(-100px,0,0);}
}
<main>
<div class="img-wrap">
<img src="http://lorempixel.com/city/500/600">
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/people/800/700">
</div>
</main>

The easiest way to achieve this would be to set the images as the background of your divs. This will not distort the images as setting the height and width on an img element would. You can then define whether to center it or not.
.img {
width: 200px;
height: 100px;
display: inline-block;
margin-right: 10px;
background-size: cover;
background-position: center;
}
<div class="img" style="background-image: url('https://images.pexels.com/photos/23764/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');"></div>
<div class="img" style="background-image: url('https://images.pexels.com/photos/23388/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');">
</div>

I have always had this problem, the only solution I found that solves this problem effectively is
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
and have the image displayed via backend like php with inline style
<div class="image" style="background-image: url('pathToImage');"></div>

Jquery - How to crop a image and scale it same size as the original image

I want to crop a image from original image by giving (xAxis, yAxis, Height, Width).
all the cropped image should just as big as the boxes belows
[2
and make the cropped part to a fix size so I can show those cropped image orderly on the web no matter the height and width given by user.
I try using jrac however it required me to save the cropped image before I show with tag. Also I tried use pure css to complete this.
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
However the idea of css to crop image is just to hide the other part of the image and if I resize it as the original image. The other part appear again. I'm wondering what is the good approach to do so?

CSS IMG Fill the container width/height. Recognize IMG aspect ratio.
EDIT: I had to scrap the idea of using image orientation. Aspect Ratio makes more sense.
This could work - Pictures are from wikimedia. One is vertical, second is horizontal. They are centered and fit to width/height.
I had to change $(document).ready() to $(window).on("load") - because the document ready waits only for HTML DOM to be fully loaded, but if images weren't downloaded yet, it would falsely recognize img dimensions and therefore its aspect ratio (EDIT) .
jQuery is used only to determine the Image Aspect ratio
CSS centers the images inside the container element and resizes them
according to the aspect ratio in comparison to the container.
Cropping is done simply by containers overflow:hidden
$(window).on("load",function() {//wait for images to be loaded
$(".crop img").each(function() {//loop through images to be cropped
if (($(this).width()/$(this).height()) < ($(this).parent().width()/$(this).parent().height()))//compare Aspect ratio
$(this).addClass("taller");
});
});
body{padding:0;margin:0;}
.crop {
position: relative;
display:inline-block;
width: 200px;
height: 150px;
overflow: hidden;
/*hide "crop" overflowing parts of images*/
border:1px solid #000;
}
.crop img {
position: relative;
box-sizing: border-box;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*center the overflowing element*/
width: auto;
height: 100%;
/*Fit to height, overflow horizontally*/
border:2px dashed red;
/*highlight img borders for demonstration*/
}
.crop img.taller{
width: 100%;
height: auto;
/*Fit to width, overflow vertically*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="crop">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Tyndall_Effect_seen_in_Nature.jpg">
</span>
<span class="crop">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg">
</span>
<span class="crop" style="height:80px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg">
</span>

Much cleaner solution suggested by https://stackoverflow.com/users/1034869/edmundo - https://stackoverflow.com/a/42714818/7581087
It is much cleaner and easier. On the other hand, it doesn't use <img /> - which can possibly be bothersome.
body{padding:0;margin:0;}
.crop {
display:inline-block;
width: 180px;
height: 120px;
background-position:center center;
background-size:cover;
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="crop" title="1st Image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/82/Tyndall_Effect_seen_in_Nature.jpg)">
</span>
<span class="crop" title="2nd Image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg)">
</span>
<span class="crop" title="3rd Image" style="height:80px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg)">
</span>
<span class="crop" title="4th Image" style="width:50px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg)">
</span>

How to scale a div to a responsive image

I'm making a responsive website and I want a image next to a div.
While placing the image next to the div is no problem, it gets tricky when I make my screen smaller.
I gave the image a width of 100% and a height of auto (responsive image) and this is the result:
This example is how it needs to be permanent, even when I scale it down.
Right now when I scale it down, this happens:
Because the image is responsive, it shrinks and the div stays in place.
Is there any way to make the div scale with the picture?
My CSS (Made in SASS):
.block-middle{
background-color: $oranje;
color: #fff;
padding-top: 85px;
padding-left: 55px;
padding-right: 55px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
padding-bottom: 87px;
.button-wit-bruin{
margin-top: 30px;
display: inline-block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
padding-bottom: 30px;
}
}
.block-right{
img.liggend{
width: 100%;
height: auto;
}
}
And the HTML is simply:
<div class="col-md-4 no-p block-middle">

<div id="img1_div"></div>
<img id="img1" alt="" />
<script>
$(document).ready( function(){
$(window).on("load", function(){
$(window).on("resize", function(){
var imgHeight = $("#img1").height();
$("#img1_div").height( imgHeight );
}).resize();
});//window load
});//document ready
</script>
This code will work in most cases ( except there's no overriding behaviour ), no matter where your image and div are placed. I would like to mention though that resize and scroll events should not be handled crudely this way, but should be optimised using a global timeout variable.

the trick is to set the height of the div relative to the width...which ironically, you can't do with the height property, since height:auto; makes it the height of it's children.
padding however is relative to the width of the parent...so it's a little bit funky, but if you play with the padding-bottom as a % and make the height:0px; you can achieve the desired effect without using Javascript. Here's the relevant CSS:
.responsive-background {
float:left;
width:60%;
height:0px;
padding-bottom:30%; /* adjust this depending on the height/width of the image you are aligning to */
}
And a Codepen with more detail and some additional styling:
http://codepen.io/ryantdecker/pen/LZYYaj
I think this will do the trick for you.

One way I can think of is, use the image as background for div and use background-size as cover:
.right-block {
background: url('https://placeimg.com/640/480/any');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}

Ahhh sorry I misunderstood your question. This can be done with a bit of flexbox if your target browsers support it. Is this the result you're looking for?
.container {
display: flex;
}
.left-block {
background: red;
width: 50%;
}
.right-block {
width: 50%;
}
.image {
display: block; // Removes spacing around image cause by default display: inline;
width: 100%;
}
<div class="container">
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
</div>
Previous Answer:
It seems as though there's a height set on your .block-right element. The code you provided is rather incomplete as you're missing the markup for your .block-right element. But is this what you're looking for?
.left-block,
.right-block {
float: left;
width: 50%;
}
.left-block {
background: red;
height: 200px;
}
.right-block {
background: grey;
}
.image {
width: 100%;
}
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.

This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>

Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}

Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}

You could also set the image to display: block and add padding, if it does not mess with your layout.

parent div's width larger than children's width in Firefox

I have a strange issue in Firefox.
I have a div with height defined in constant px value, and there is an img element within that. I have no problem with this setup in chrome, but in firefox parent div's width turns out to be larger than the img in it.
This is the html structure:
<div class="wrapper">
<div class="imageHolder">
<img src='dasource'>
</div>
</div>
And this is the css:
.wrapper {
width: 900px;
}
.imageHolder {
height: 400px;
width: auto;
background-color: green;
float: left;
max-width: 50%;
overflow: hidden;
}
.imageHolder img {
height: 100%;
}
http://jsfiddle.net/MXudn/6
As explained in this fiddle, in firefox, the parent div turns out to be larger than the image in it.
Any ideas why this is the case?

This does look like a bug in Firefox to me. For some reason overflow: hidden is causing the parent div to use the width of the unscaled image rather than post-scaling.
http://jsfiddle.net/MXudn/8
<div class="imageHolder">
<img src='http://placehold.it/650x650' />
<div>
.imageHolder {
height: 400px;
background-color: green;
float: left;
overflow: hidden;
}
.imageHolder img {
height: 100%;
}
In this stripped down example, you can clearly see the issue. The image is originally 650px wide, rescaled based on height, it becomes 400px wide. The parent however, remains 650px wide.
If you do not need the overflow: hidden simply removing that fixes the problem.
http://jsfiddle.net/MXudn/12/
EDIT: Firefox bugzilla ticket for this issue.