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.
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.
There are many articles out there discussing a clever way in CSS to make videos (such as youtube) delivered through an iframe responsive (such as described here https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/). Ultimately you wrap your iframe in a relative container with a top padding equal to the aspect ratio (height/width * 100)% of the video.
This works great when your aspect ratio of the iframe contents is static, but is there a clever way to achieve this purely through CSS if your iframe content is also responsive?
For example lets say your iframe contents contain a bootstrap grid of boxes (col-xs-12 col-md-3) and you assign 100% width to the iframe so it responds to vertical window resizing of the parent. As you decrease the size of the parent, at the point the col-xs-12 kicks in, the aspect ratio has changed and you are probably going to see a vertical scrollbar appear for the iframe due to the height change.
I think the only way to achieve responsiveness in this case is through javascript (postMessage calls).
Anyone have any thoughts?
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.
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 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
});