Implementing specific CSS styles for images that exceed a certain size limit

Currently, I am facing a dilemma as I work on developing a basic iPhone website that serves as a port for my blog. The main issue I am encountering is the need to add a border around images above a specific size and center them in order for the blog to have an appealing appearance.

This website primarily consists of an RSS feed presented using simple javascript and enhanced with CSS styling. My current focus is on fine-tuning the CSS aspects. I would greatly appreciate any assistance with this task, especially since I am still new to javascript and would benefit from detailed explanations.

javascriptiphonecss

Answer №1

Let's simplify this. Using Javascript (specifically with jQuery), we can go through each image on the page after it has loaded. If an image's height or width exceeds a certain value, let's say 300 pixels, we will add the 'oversized' class to its parent element. Feel free to adjust this size limit in the script according to your definition of oversized.

As for the CSS part, it mainly includes setting text-align:center; to horizontally center the image within the surrounding <div> and applying a border around the image.

Give the Fiddle a Try

Javascript

$(document).ready(function() {
    $('img').each(function(e) {
        if (($(this).height() > 300) || ($(this).width() > 300)) {
            $(this).parent().addClass('oversized');
        }
    });
});​

CSS

.oversized { /* Center align the image */
    text-align: center;
}
.oversized * { /* Add a border around anything inside the oversized div (the image) */
    border: 1px solid black;
}

​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

csspseudo-element

What is the best way to create an adaptive <pre> tag for ASCII art without using media queries?

Currently, my username is displayed as an ASCII art banner/header and I am looking to enhance its responsiveness. Instead of relying solely on media queries, I am exploring the possibility of making it scale within a CSS grid container. This approach would ...

htmlcsscss-grid

How can I make my modal box appear after someone clicks on selecting a college?

Can someone help me figure out how to display my modal box after clicking into the selecting list? I've already coded it, but I'm struggling with getting it to show up after the click event. Any assistance is appreciated! In the image provided, ...

javascriptphpjqueryhtmlcss

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to adjust the positioning of an image within a <div> element?

I'm attempting to vertically align an image within a horizontal menu bar. My goal is to adjust the padding/margin of the image using inline CSS. However, I've noticed that when I add margin-top or padding-top, it affects the positioning of all m ...

cssalignment

When encountering an "uncaught SyntaxError" in the $.parseJSON function, one may want to investigate

When using this jQuery function, I encounter an Uncaught SyntaxError: Unexpected token u error if the cookie $.cookie('chk_ar') is undefined. function checkBgNoise() { // checks background noise option state, // activates 'on' click i ...

javascriptjqueryjsoncookies

Using data across multiple instances in node.js EJS partials

I need some advice regarding my nodejs project. I have created a sidebar partial that requires user data to be displayed on it. This sidebar is utilized across multiple pages in the project. However, currently, I have to include the user data in every func ...

javascriptnode.jsexpressejs

Ways to prevent ERR_INSUFFICIENT_RESOURCES when making AJAX requests

It's been a while since I dabbled in JavaScript, so please be patient with me. I'm currently developing an application that generates reports on student data using PHP as the backend. Periodically, we need to refresh the database used for these ...

javascriptphpjqueryajax

The feature to swap out the thumb of a range slider with an image is currently not

I'm attempting to design a unique range slider using CSS. <style> .slide-container { width: 300px; } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #FFFFFF; outline: none; opacity: ...

htmlcssslider

Bundling sub-components using Rollup for NodeJS application packaging

My ES6 library consists of several sub-modules arranged like this: - package.json - lib - my_package - file1.js - file2.js - sub_module1 - file3.js - file4.js Currently, I import modules within my package using file resolution r ...

javascriptnode.jsrollupjs

Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? Thank you, Carolin #content_row{ margin-top:150px; margin-left:10px; margin-right:10 ...

htmlcssbootstrap-4

Avoiding future clicks with a delay in VUE: A guide

Is there a way to prevent the next click for 600ms after an initial click? I want to temporarily "disable" all a tags for 600ms after one is clicked. Any help would be appreciated. VUE <ul> <li v-for="item in navigation" :key=& ...

javascriptvue.js

Tips for organizing an object according to specific attributes

Within my table, I have implemented a feature that allows the display of only selected columns at a time. To achieve this, I store the chosen columns (table headings) in an array called selectedTableHeaders. The next step is to filter out a new array bas ...

javascriptvue.jsecmascript-6html-table

Unable to access setRowData() in AgGrid/Angular 2 leads to rendering of the grid without displaying any rowData

Resolved I think my solution is temporarily fixed and it reveals that I may have set up my mongoose model incorrectly. The answer provided did assist me in solving my issue, but ultimately the reason for the empty data rows was due to incorrect identifier ...

javascriptangularag-grid

The combination of Ajax, JavaScript, PHP/HTML, and dynamic variables

Hey there, I'm currently working on a game development project and have encountered what seems to be a scope issue. The issue arises in my js file when a player clicks on the card they want to play: It starts in my js file:</p> <pre>&l ...

phpjavascriptajaxscope

Can I extract JSON data from the AJAX response?

When receiving JSON data, such as in the example below, it is often necessary to separate each value into individual variables: var reviewDate ='2015-06-01T05:00:00Z' var developers ='Ankur Shah,Srikanth Vadlakonda,Tony Liu, Qiuming Jie&ap ...

javascriptjqueryajaxjson

Mysterious JQuery attribute

I've come across a piece of code that utilizes an unfamiliar selector that I can't seem to figure out: $("div[tag=" + someVariable + "]").css("display", "block"); From what I gather, the selector is searching for a div element with an attribute ...

jqueryhtmlcssdom

Connecting with Node JS, utilising the power of Socket.IO, Express, and establishing

Hey everyone, I have an interesting concept that I'd like to discuss with you to get your thoughts on its feasibility. The idea is to set up an RFID reader connected to a MacMini (with the Mini hidden and only the RFID visible). An iPad would also be ...

javascriptnode.jshttpexpresssocket.io

Choose a value to apply to the dropdown menus

I've encountered an issue with the following code - it only seems to work once and not every time: var selectedVal = $('#drpGender_0').find("option:selected").text(); if (selectedVal == "Male") { $('#drpGender_1').fi ...

javascriptc#jqueryasp.net

One class seems to be causing issues with hover functionality while the other works perfectly fine

HTML: <div class="channellist"></div> Through the use of Ajax, I am able to dynamically retrieve channels when the page loads and then append them within the channellist container. Once appended, my HTML structure appears as follows: <div ...

javascriptjquery