Image Stretch and crop to fit the exact size - javascript

I have a div containing image inside it,the div overflow is hidden so they image will be cropped if there is excess width or height, it was working fine but some times it does not. what is wrong ? i have tried this
Jquery
$("#covorpic").on("load" , function(){
var covwidth = $("#covorpic").width();
if (covwidth>750){
$("#covorpic").css({"margin-left":(750 - $("#covorpic").width())/2});
}
else{
$("#covorpic").css({"width" : "750px" });
$("#covorpic").css({"margin-top":(200 - $("#covorpic").height())/2});
}
});
html
<div class="covor_cont">
<img id="covorpic" src="someimage.ext">
</div>
css
.covor_cont{
max-height: 200px;
min-height:130px;
overflow: hidden;
text-align: center;
}
#covorpic{
height: 200px;
}

You should be able to do this in CSS, try
.covor_cont {
width: 750px;
}
#covorpic {
max-width: 95%;
}
Set the container to an exact size, set the max-width on the image to shrink if larger than container.

Related

jQuery: cannot scale img with .load. It fills the entire page. I want to scale it down to fit

I am successfully loading the id #Meatball from file NASA.html. It is a very large img within NASA.html. I am unable to size down the image to 300x250px. I wanted the loaded element, whether its a video, image, or text, to fit within 300x250.
#contentframe{
position:absolute;
z-index: 2;
width: 350px;
height: 300px;
}
#iframe{
?
}
<div id="contentframe">
<div id="iframe"></div>
</div>
$("#iframe").load("NASA.html #Meatball");
Try this:
$("#iframe").load("NASA.html #Meatball");
#contentframe{
position:absolute;
z-index: 2;
}
#iframe * {
height: 300px;
width: 250px;
}
<div id="contentframe">
<div id="iframe"></div>
</div>
Here is a working example on JSFiddle: https://jsfiddle.net/sfarbota/3mwc8xL7/
in css, set the height and width of that image to 300x250px.

Change the width of the images according to aspect ratio

I am building a comic reading website. I got a problem with displaying images. Most of my images are having the aspect ratio of 2/3. Means 1000x1500. So I am displaying them with below css rules. But there are some images like double page images. So when the css rule max-width=728px is applied this 4/3 raito image can't read anything. So basically I want to change the css rule for max-width=728px when the user came across to 4/3 ratio images. Css rule max_width=728px still have to apply the 2/3 ratio images but when the ratio changes to 4/3 it has to be max-width=1250px. What do i need to do for solving this? It is related to css or need some javascript. This manga website has this future I think. Double page images are displaying width of ~1300 and when i shrink the browser its javascript updating the width and height.
Example:http://www.mangaeden.com/en/en-manga/berserk/344/17/
My website:http://mangabozok.com/oku/Berserk/346/5
HTML:
<div class="gnc02">
<img src="paths">
</div>
CSS:
.gnc02 img {
display:block;
margin:auto;
max-width: 728px;
height: auto;
}
You can try the following style:
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
For the 2:3 images, the max-height applies and restricts the width to 728 pixels. For the 4:3 images, the max-width applies and restricts the width to 1250 pixels.
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
<br/>
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" />
</div>
Note: when running the code snippet, you should switch to "Full page" mode.
.gnc02 {
max-width: 728px;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
float:left;
}
try this
.gnc02 {
width: 99% !important;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
this code is used for responsive designing. I think this may help you in any type of image or the size of the image.

Why isn't my image height scaling correctly?

So I'm working on a gallery where images are shown in a 200x200px list item
#gallery-list-ui li {
display: block;
margin: 10px;
height: 200px;
width: 200px;
overflow: hidden;
}
In order to have portrait / landscape images use the entire height/width, I'm using javascript to decide if I should set either height or width to 100%.
var portrait = ($img.height() > $img.width() ? true : false);
if(portrait){
$img.css({'width' :'100%', 'height' : 'auto'});
} else {
$img.css({'height' :'100%', 'width' : 'auto'});
}
The result is that portrait images scales correctly
<img src="img.jpg" style="width: 100%; height: auto;">
but landscape images scales 100% of its original height and is not limited to the height of the list box.
<img src="img.jpg" style="height: 100%; width: auto;">
What am I missing here? Can anyone explain why this is happening?
See my fiddle here: https://jsfiddle.net/smyhbckx/5/
Add height to .img-container:
.img-container{
height: 100%;
}
CSS height is very strict. It is based on the element's direct parent's height. The direct parent of the img is .img-container - which doesn't have a height (meaning height: auto;). The parser recognize this as an unknown number, and thus your img height is not scaled.
Try with object-fit:cover;height:100% property on image and also add following styling to container
.img-container {
width: 200px;
height: 200px;
}
I hope this will solve your issue
https://jsfiddle.net/smyhbckx/7/

Dynamically resize side-by-side images with different dimensions to the same height

I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in CSS from everything I've seen (although possibly with the flexbox model, but I don't know enough about it to say) so I may need a JavaScript solution, but the ones I came up with failed due to either not knowing the overall height of the bounding box, or the fact that adjusting the height of the images affected the height of the bounding box which meant it was constantly re-adjusting itself.
This is an example of arbitrary image heights: https://jsfiddle.net/c6h466xf/
And this is what I'm trying to achieve (although obviously without hard-coding the widths, I want those to be resolved dynamically): https://jsfiddle.net/c6h466xf/4/
This is what I'm starting with (links to JSFiddle need code):
CSS
div.container {
width: 100%;
}
div.container img {
width: 49%;
}
HTML
<div class="container">
<img src="http://i.imgur.com/g0XwGQp.jpg">
<img src="http://i.imgur.com/sFNj4bs.jpg">
</div>
EDIT: I don't want to set a static height on the container element, because that stops it from responding to the width of the overall page, so that the images resize dynamically to each other and responsively to the width of the page, so their total combined width is always (for example) 80% of the page width whatever the viewing device.
If it's responsive, use percentage heights and widths:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div.container {
width: 100%;
height: 100%;
white-space: nowrap;
}
div.container img {
max-height: 100%;
}
<div class="container">
<img src="http://i.imgur.com/g0XwGQp.jpg" />
<img src="http://i.imgur.com/sFNj4bs.jpg" />
</div>
You could set it by height. Give your container div a fixed height.
Here is a solution for you:
div.container {
height:200px;
}
div.container img {
height: 100%;
}
JSFIDDLE
You have 2 other options to get all your images to the same height:
You can place an overflow:hidden on the container div
Or
Clip your images to the same size: http://www.w3schools.com/cssref/pr_pos_clip.asp
Set a class for your images:
<img src="http://i.imgur.com/g0XwGQp.jpg" class="example" >
<img src="http://i.imgur.com/sFNj4bs.jpg" class="example" >
Then you need to set the height of your container:
div.container {
height:200px;
}
In your JavaScript:
var yourImg = document.getElementsByClassName("example");
if(yourImg && yourImg.style) {
yourImg.style.height = '100%';
yourImg.style.float = 'left';
}
This should be a simple code, check the following:
HTML code:
<table class="Table">
<tr>
<td><img src="images/1.jpg"/></td>
<td><img src="images/2.jpg"/></td>
<td><img src="images/3.jpg"/></td>
<td><img src="images/4.jpg"/></td>
</tr>
</table>
CSS:
table { width: 100%; }
table img {
max-width: 100%; max-height: 100%; padding-left: 5px; border: none;
}

Vertical adaptive image alignment on adaptive layout

This is my code :
HTML
<html>
<body>
<div id="id">
<div class="one">
<img>
</div>
<div class="two">
<img>
</div>
<div class="one">
<img>
</div>
</div>
</body>
</html>
CSS
div{
float : left;
width : 33,3%
height : 100%;
}
img{
max-width : 100%;
max-height : 100%;
}
div#id{
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
}
I have been looking for this for ages and can't figure it out...
Unknown height of divs and images images can change.
How can I vertical align the images inside the divs class="one"?
as this is an adaptive layout, images must be scaled to prevent overflow.
table-cell or line-height = 100% doen't seem to work.
Do I realy need javascript here?
I have tried a jquery code but it is above my knowledge and ends up changing the margin of all the images in my website... here it is :
$(document).ready(function() {
$(".one").each(function(){
var wrapH = $(".one").outerHeight();
var imgH = $("img").outerHeight();
var padTop = (wrapH-(imgH))/2;
if (padTop>0){
$("img").css("margin-top", padTop + "px");
}
});
});
You can do this easily enough with the following HTML:
<div class="wrap">
<div class="image-panel">
<img src="http://placekitten.com/300/300">
</div>
<div class="image-panel">
<img src="http://placekitten.com/400/600">
</div>
<div class="image-panel">
<img src="http://placekitten.com/200/600">
</div>
</div>
and apply the following CSS styling:
.wrap {
border: 1px dotted blue;
display: table;
width: 100%;
}
.image-panel {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px dashed blue;
width: 33.3333%;
padding: 10px;
}
.image-panel img {
width: 100%;
display: block;
}
In this particular layout, I assumed that each panel has 33.3% of the total width and that the images auto scale to fit the width of the table-cell div.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/ZBNh7/
Ok I finaly found a solution using jquery thx to bdmoura in this post :
https://stackoverflow.com/users/2442497/bdmoura
He showed me how to set an adaptive margin to the images according to image and div height.
here is th jquery code :
$(document).ready(function() {
$(".one").each(function(){
var wrap = $(this),
wrapH = wrap.outerHeight(),
img = wrap.find('img'),
image = new Image(),
imgH = 0,
padTop = 0;
image.onload = function () {
imgH = img.outerHeight();
padTop = ( wrapH - ( imgH ) )/2;
if ( padTop > 0 ){
img.css("margin-top", padTop + "px");
}
}
image.src = img.attr('src');
});
});
thx to him!
Yes. I think at this point you'll need jQuery / javaScript.
You can only really align img's or inline / inline-block elements to one another.
.block img {
/* display: inline; (default) */
display: inline-block;
vertical-align: middle;
}
fiddle: HERE
It would be great if you figure it out! We all need this.
You could use table-cell as mentioned... but in a responsive setting, this isn't going to cut it - especially if these blocks are in a responsive grid. Once you need to float, which is pretty much always - things are going to get really messy. Mystery.

Categories