Develop Reference

Set perfect height and width for image for thumbnail

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

Make responsive iframe based on remaining height available with CSS

I have a website that has a title, navigation bar, and a paragraph of text, followed by an iframe. I want to set the height of the iframe to the remaining height of the screen and set the iframe width based on this height.
I have a JS function doing it when the website loads, but want to do this using CSS so it is more responsive. This tutorial shows how to do this based on width of the screen. It makes the height 56.25% of the screen width. I want to do something similar but scale the iframe so it is as large as possible without having users scroll down to see the whole iframe.
In my JS function, I have everything not including the iframe wrapped in <div class="header"> and get that height with $('.header').height(). Then I just subtract this from the window height to get the iframe height and calculate the width based on a ratio (i.e. 16/9 for a video). How can this be done in CSS?
I've tried setting the height to 100% and not specifying the width, which was suggested elsewhere. This didn't work. My iframe is essentially embedding another HTML document, not a video.

Retrieve elements height dynamically?

I'm currently try to write a toggle menu script.
Most of the futures are fine, but...
Here's my bin:
https://jsbin.com/rabiporoji/edit?html,css,js,console,output
I use media query to make a different layout,
the idea is... I tried to make the menu extend under 500px screen width,
and not to change anything when the screen size is wider than 500px.
But while the screen size stretched from small to wider than 500px,
the toggle menu will still extended if i click th button.
ps(in this case the height is fixed, but in the project i'm workin on they are pics with only width fixed in percentage)
So, I'm wondering if there's any way to retrieve the elements height dynamically, every time I change the window size.
I know there might be some js libraries and solve this problem in ease.
But I really wanna know some js basis before I start using those.
TY for your time!

window.addEventListener('resize', function(event){
let height = document.getElementById('thing').offsetHeight;
console.log('offsetHeight',offsetHeight)
});

Find out what height would have my image if i will resize the width to another value

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.

Why can't I figure out the width of elements with automatic widths?

I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated

I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});