Hi I am having an problem placing images in a neat manner in my site.
So what I have is: Using ajax I get a bunch of image URLS as JSON.
in Jquery I am looping these and printing them into a div like this:
$('.product').click(function(){
$.post(
"ajax.php",
{
prodId: productId,
action: "getProductImages"
},
function(data)
{
var obj = jQuery.parseJSON(data);
newDiv = "";
jQuery.each(obj, function(key,value)
{
newDiv += '<img src="'+value+'">';
});
$("#prod-images").empty();
$(newDiv).appendTo('#prod-images');
}
);
});
This works fine and shows the product images in a div as I want it to show. The problem is that some images have different height and width and they look awkward and ugly the way they are rendered now. How can I show them in a neat set with same height and width, or atleast same height?
I tried putting it in div tag and span tag, but it totally messes up what I already have. I am not very good with frontend technology so any help is appreciated! Even a library will help me...
Thanks in advance
You can put the height and width attributes in the img element.
Try css with img tag
img
{
height: 150px; //your height
}
This will set the height of the image and scale the image width keeping the ratio.
If you want to apply to some specific image then define that in css to . like for all image in div which class is img-div
.img-div img
{
}
You could attach a CSS class in your img tag.
.media-small {
width: auto
height: 300px; /* or em */
}
To answer your question you could also get tricky with a frame div to maintain the ratio if you don't mind the clipping
div.media-frame {
width: 300px;
height: 300px;
}
img.media {
overflow: hidden
width: 300px
height: auto /* you may need to play with your defaults */
}
Related
This question already has an answer here:
Change image width by screen size
(1 answer)
Closed 2 years ago.
I tried to solve the problem by myself, but I don't know.
When the width of the screen decreases or expands,
how can I reduce or increase the width of the image in JS?
I had an image in a table and in order to have it adapt to the table I used this class in my css :
.img-fluid {
max-width: 100%;
height: auto;
}
It would be much easier to make the image resize with the window in css rather than js.
If your image looks something like this:
<div class="Somediv">
<img src="somesource" class="Someimage"></img>
</div>
Your css can look like this:
.Somediv {
width: 50%; //the div will take up 50% of the parent element. You can use 50vw to scale by the width of the window
}
.Someimg {
display: block;
width: 100%;
}
If you really want to do it through JS here is the official documentation on element.classList which will help you do what your trying to do.
You don't need Javascript to do this. This can be done through CSS only, You need to set image width to 100% to make it responsive on browser window resize. when you resize your browser window it will automatically takes height according to image width in same aspect ratio.
you need to write a css code like this:
img.img-responsive {
width: 100%;
}
I have a little bit of JS code that is causing me some issues.
I have a div which i called image-window it is using bootstrap class col-xs-8, i need it to hold an image, but the image size is dynamic, so i did was create another container called img-container.
What I am trying to do is make sure that if the image (img-container) is bigger than the image-window then force the img-container to the same size as the image-window.
What i have only works some of the time though ... I think that if the image takes longer to load than the page, it doesn't seem to work and i have to press refresh a few times to get it to properly size it.
Below is what i have, any help would be greatly appreciated.
<script>
$(function () {
var originalWidth = $('#image-window').width();
var img = new Image();
img.src = 'https://websitehere.com/fboQ2uivUPqBqTyi0ZtiPq.jpg';
img.onload = function () {
var newContainerWidth = img.width;
if ( originalWidth >= newContainerWidth ) {
$("#img-container").width( newContainerWidth );
}
};
});
</script>
So if I'm understanding what you want, you shouldn't need any js at all. By default, images just take up their native resolution in width, causing it to be larger than its container. You can easily fix this by seeing a max-width: 100% on the img.
I made an example below. The first img has no max-width setting, but the second one (which is in a container of width 25%) does.
.huge-image-contained {
width: 25%;
}
.huge-image-contained img {
max-width: 100%;
}
<div class="huge-image">
<img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>
<div class="huge-image-contained">
<img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>
Is there any reason you are not using css to accomplish this?
Built into css is a function as follows:
#idofimage {
width: 100%;
}
#Or use class if this is dynamic
.idofimage {
width: 100%;
}
This will go in your main style.css file which is called in the top of your page by a <meta> tag or simply in a <style> //code </style> fashion.
This will ensure that the image is always 100% of the container width which is your <div> tag the image is put in.
There are many other css styles but using javascript to resize images is technical whilst tools like css make life much easier.
I have implemented this fixed grid: http://jsfiddle.net/challenger/UxzCa/1. There are two requirements:
images should fit into a square card div (width/height can be different);
card dimensions shouldn't be fixed.
As for dimensions it is possible to implement using jquery and recalculate widths/heights on window.resize event. Are there alternative ways?
I have a partial solution that takes care of the image aspect-ratio issue and the fixed-width issue.
For the fixed-width of the grid, set the width: auto and this will allow the floats
to wrap to as many lines as required:
.grid-row {
width: auto;
margin: 0 auto;
}
The images need to scale with height if they are portrait (height/width > 1) or width if they are landscape (height/width < 1).
Define the following classes:
.table-cell img.portrait {
height: 100%;
}
.table-cell img.landscape {
width: 100%;
}
and then use the following jQuery method to set the correct class based on the aspect ration of each image:
$('.table-cell').each(function(){
var image = $(this).find('img');
aspectRatio = image.height()/image.width();
if (aspectRatio > 1)
{
image.addClass('portrait');
}
else
{
image.addClass('landscape');
}
});
See Demo Fiddle
Footnote
It may be possible to make the .card elements responsive and maintain their aspect ratio using some CSS techniques similar to the ones presented in the following question:
How do you vertically center absolute positioned text w/o declaring container size and w/o JS?
height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.
'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}
So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}
No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}
With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');
Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}
My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});
I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.
I have a div with a set height of 200, and sometimes there's enough content inside to have to scroll. Is there any way to be able to scale/grow the div until there's no overflow in Scriptaculous?
Edit: I looked at the wiki, especially at Effect.Scale (which seems like the one I want) but I couldn't find a way to do what I'd like.
Use CSS?
/*In non-IE css:*/
.myclass {
min-height: 270px;
}
/*In css for IE:*/
.myclass {
height: expression(this.scrollHeight < 270? "270px" : "auto" );
}