I'm currently facing an issue where I am using max-width to resize images, but they are not scaling proportionally. Is there a way to achieve this with JavaScript/jQuery? Additionally, is it possible to do this without initially knowing the image's dimensions and potentially determining them using JavaScript/jQuery?
Opposing the widely held belief, it is possible to achieve this without explicitly stating the size in the HTML code. This can all be accomplished through CSS:
#container img {
max-width: 150px;
width: 100%;
height: auto;
}
To ensure proper display, make sure to include the original width and height:
<img src="/whatever" width="100" height="200" alt="Whatever" />
Next, use this CSS code snippet as a guide:
#content img { max-width: 100%; height: auto }
If you prefer using jQuery for dynamic sizing, consider implementing the following script:
$(function(){
$('#content img').load(function(){
var $img = $(this);
$img.attr('width', $img.width()).attr('height', $img.height());
});
});
Don't forget to replace #content with your desired selector for targeting.
If you need to establish a fixed width, consider using:
height: auto
To achieve this without using Javascript, adjust the max-width as needed to specify the desired length.
#content img {
max-width: 620px;
height: auto;
}
I successfully tested this method on a Mac using Firefox 28, Chrome 34, and Safari 7 without explicitly setting width or height values in the img tags.
It is advised not to set the CSS width to 100% following the max-width declaration, as mentioned by one individual, because it may cause images narrower than the container to be enlarged beyond their intended size (e.g., icons).
It might not be too late, but here is a piece of code that helped me achieve proportional images in my gallery. It may take some time to understand how it works, but give it a try and see the results for yourself.
<style>
div_gallery {
width: 200px; // set your desired constraint size here
max-width: 95%; // must be connected to img element
}
div_gallery img {
width: auto !important; // make sure to include this line!
height: 95%; // linked to the max-width specified above
}
</style>
When both width and max-width are used on the image, IE8 becomes problematic.
Solution: Apply the width directly to the image and then surround it with a div element that has the max-width property. (And maybe unleash a curse towards Microsoft for good measure.)
To accomplish this task, I had to meet specific requirements:
After experimenting, I devised what seems like a complex solution involving three elements and two inline styles. However, it appears to be the most effective way to achieve proportional image scaling without causing content jumping during loading.
.image {
position: relative;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- container element with max-width prevents upscaling -->
<div class="image" style="max-width: 640px;">
<!-- div with padding equal to the image aspect ratio to make
the element the correct height -->
<div style="padding-top: 75%;"></div>
<!-- img scaled to completely fill container -->
<img src="//placebear.com/640/480" />
</div>
https://jsfiddle.net/Lqg1fgry/6/ - The inclusion of "Hello" allows you to observe any content shifting after image loading.
function adjustBackgroundSize() {
var scaleFactor = 0;
var windowWidth = $(window).width();
var picWidth = $("#myPic").width();
var windowHeight= $(window).height();
var picHeight = $("#myPic").height();
if( $(window).width() > $(window).height() ) {
scaleFactor = windowHeight / picHeight;
scaleFactor = windowWidth / picWidth;
} else {
scaleFactor = windowWidth / picWidth;
scaleFactor = windowHeight / picHeight;
}
picWidth = picWidth * scaleFactor;
picHeight = picHeight * scaleFactor;
$("#myPic").width(picWidth);
$("#myPic").height(picHeight);
}
I am currently working on integrating Vue.js into an existing project that does not utilize Vue. Unfortunately, I have been unable to find any resources or documentation on how to create a Vue component with an API that can be accessed by external code out ...
I have a jquery-mobile application with two actual HTML pages, but many more data-role="page" divs. The issue arises when transitioning from the first actual HTML page to the next one as the navigation stops working. I am not using any custom JavaScript, j ...
While developing an express app, I encountered an issue where my CSS code stopped working whenever I added an ":ID" parameter to the URL. It seems like a filepath problem because bootstrap is still loading fine, but on the specific page with the ID paramet ...
Currently, I have a Vue filter set up to display dates in a visually appealing way. However, I am looking to enhance the filter by adding a feature that would highlight dates in red if they are overdue (meaning the date is earlier than the current date). I ...
I am encountering some issues with the clearTimeout() function. The setTimeout() function is working as expected, but I want it to stop running when I close my notification. I'm not sure what is causing the problem in my function. After closing the ...
Looking to create a custom audio player using HTML, CSS, and JS. The player should have basic functionality like a play button and progress bar. However, I want to allow users to add tags on the progress bar of the audio file, similar to how SoundCloud&apo ...
I have a 2D array containing longitudes and latitudes that I need to map using MapBox. The example I found only demonstrates plotting two points, so I attempted to use a for-each loop to iterate through my 2D array and plot all the points. However, I enco ...
I am facing an issue with the height of my two columns as I have another column separating them. The challenge is to make the left and right columns extend in height based on the content added to the center column. One important point to consider is that ...
const Commando = require('discord.js-commando'); module.exports = class AnnounceCommand extends Commando.Command { constructor(client) { super(client, { name: 'announce', aliases: ['an'], ...
Having difficulties grasping React props and mapping data from an array? Struggling to get the props to show up on your Card component, or display in React dev tools? It's unclear where the mistake lies. Seeking assistance to pinpoint the issue. Also ...
Initially, I have an array structured like this: [{ name: 'a', color: 'red', children: [{ name: 'a1', color: 'red', children: [{ name: 'a11' ...
When I call a function from an external library on page load in my Angular application, Chrome dev tools console shows the error message: "Unhandled Promise rejection: Cannot read properties of undefined (reading 'page') ' Zone: <root> ...
I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...
Currently, I am developing a vuejs application that will incorporate video elements. To enhance user experience, we are interested in preloading these videos upon the initial loading of the web application. I am considering using a listener like, documen ...
Experimenting with Django Shop and following a tutorial that can be found here: (stable version). After starting the server and navigating to localhost, the following error message is displayed: Error: File to import not found or unreadable: bootstrap-s ...
I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...
My goal is to fetch specific information from a JSON file and display it on different HTML pages by clicking a button. I will achieve this using jQuery and plain JS. For the first HTML page, I want to show all products from the JSON in an element with id= ...
Feeling a bit lost on how to articulate this inquiry, or even where to start looking for answers. I have a dynamic photo/text feed populating an array, meaning my page is constantly being updated with new information. The influx of data is happening at a ...
I am new to working with Node.js and I'm trying to send JSON data from client side JavaScript to an Express.js server. Once I achieve this, I plan to use the data received by the server to fetch additional information from MongoDB. The client side cod ...
Below is the snippet of code: $('> li', this).each(function (index) { var top_space = $(this).css('padding-top'); $(this).prepend('<div></div>'); $('> div', this).css({ position ...