When i am uploading photos in php and I went to give preview of the image to user. I don't want to generate a separate for that. But i want to set perfect height and width of that photo to make make it look like thumbnail;
You could try creating a thumbnail class and adding any of these properties to set the 'ideal' size for the image:
max-width
min-width
max-height
min-height
Related
I'm designing a website for an artist, and using JQuery to pull images from directories to display on their website.
The problem is that the images are all different sizes, and it's hard to make them look nice in a grid.
In the following example, you can see the images are the same height as the other images in their row, but the width of each row is adjusted so that the rows are of equal length.
How is this achieved? Here is a live example: https://www.zhangjingna.com/
This is achieved using a flexbox and flex-wrap in css.
You probably also need some logic to determine the width of the three images you want to display and use that to set the images width according to that in relation to window.innerWidth. Then in css you can set the height to your desired height (maybe an average of the heights of your images?) and set the object-fit css property of your images to cover;
BTW: The way your example does it is by just arranging the images with absolute positions, which is a nightmare
You should dynamically check aspect ratio of every image, if it is horizontal (landscape), then set image width to 33.3% and don't set height.
If aspect ratio of image is vertical (portrait), then set image height to your row height, for example 300px and don't set width.
I am using ionic2.
I display the list of images.But these have different height and width.
Here is my URL
https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494575890205.jpg?alt=media&token=69debcf1-c563-4799-8768-e64a58103e56
another URL
https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494575890149.jpg?alt=media&token=81122cfa-290a-400e-b6e8-925f13db5291
I need these images are same height and width using javascript.
How can i do this?
Kindly advice me,
Thanks.
I have a twitter bootstrap carousel in which I have images and iframes. Images work perfectly because they have img-responsive class and they resize. The iframes don't work like that. I have to give them a width and a height and change their width and height whenever the user resizes the browser.
The carousel can contains only images, only iframes, or images and iframes in the same time.
How can I make the iframes work like the images? Have the same dimensions, resizes in the same way?
My images are 750 x 427px. The thing that passes my mind is to give the iframes width 100% of the container because this work and after this I have to find the height considering that if the width is for example 300px the height should direct proportional with the image dimensions which are 750 x 427px.
We can simply use the rule of three ? Or there is somehthing more complex using image ratio?
Through .height() and .width methods.
You could use $("#imgID").height() to get its height and $("#imgID").width() to get its width. Of course the imgID is replaced with the actual ID of your image.
Does Facebook in its gallery put image width and height in database?
Using JavaScript, they can not be sure about image width and height until image fully loads. But on FB, image is been loaded while its displaying and image is properly centered horizontally and vertically.
Facebook use display:inline-block for the image and text-align:center for parent div to center image in theater images.
Check out their blog post that explained how they did it. It's a nice CSS code but not all CSS. They use JS to set line-height of one of divs based on window.height.
I need an image slider which resizes the images only if its needed (the size of the image is bigger than the div containing the slider).
I've tried with AnythingSlider, but when I set the width and height to the div containing the slider, the images that are smaller than the div are stretched. I don't want them to be stretched.
You could just do a check in javascript/jquery to see what the size of the image is. If it's bigger than the desired dimension you can just scale it down.
play with this . add condition for styling
http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery
http://demos.webdesignledger.com/jquery_image_grid/example2.htm