Achieving a bold border on top of an image without altering the image's dimensions

I'm in need of Photoshop-like selection functionality, but when I add a border to the enclosing div that holds the image, the image ends up smaller by twice the thickness of the border. How can I fix this issue?

I have attempted a solution by adding the following CSS:

.picture-frame--image {
    border: 5px solid red;
    margin: -2px 0 0 -2px;
}
<div>
<img class="picture-frame--image" src="https://placehold.it/500x500">
</div>

<div>
<img src="https://placehold.it/500x500">
</div>

However, the image is overlapping the border, which is not what I want. Strangely, z-index doesn't seem to be working for me, and I'm unsure why.

htmlcss

Answer №1

Actually, the top answer was provided by cinnamon in the Nathaniel thread.

Here is what I came up with:

div {
  border: 2px dashed violet;
  margin: -2px;
}

Many thanks to everyone for their valuable responses. Much appreciated.

Answer №2

It appears that the solution may involve inserting the following code snippet into your css file:

* {
    box-sizing: border-box;
}

However, without seeing any code from you, it is difficult to provide a definitive answer. For more information on this topic, you can visit: https://www.w3schools.com/css/css3_box-sizing.asp

Answer №3

If you're searching for a way to enhance your elements, consider using pseudo elements such as ::after and ::before. These allow you to insert additional content before or after an element, though keep in mind that not all HTML tags can support them. Check out the MDN Documentation on Pseudo Elements for more information.

For a practical example, take a look at this StackBlitz demo

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

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

Conceal the input field prior to making a selection from the dropdown menu

I have implemented a drop-down menu for selecting dependencies, similar to how it functions in JSFiddle. $('#user_time_zone').on('change', function() { dateCalender = $(this).val(); if (dateCalender == 'Single Date') { ...

javascriptjqueryhtml

What is the best way to calculate the width for each of the three elements in a row so that they all have 300px

Creating my own framework using flexbox has been an interesting journey. One of the major challenges I faced with flexbox is when dealing with an odd number of elements in a row, such as 3, 5, or 7. To tackle this issue, I decided to use JavaScript/jQuery. ...

javascriptjquerycssflexbox

Various conditional statements based on the dropdown menu choice

I currently have a basic dropdown menu on my webpage that enables users to switch between viewing Actual or Planned dates/times in a table (I am utilizing the controller as syntax): <select ng-model="trip.viewType"> <option value="actual"> ...

javascripthtmlangularjs

Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth. My idea involves adding an extension to the vi ...

javascripthtmliframehyperlinkyoutube

Choose the immediate sibling located right after a specific element

My goal is to have the second paragraph following a h1 element display a dropcap, with the first being reserved for the author and date. Although I've tried using different CSS combinations like h1 + p::first-letter {}, it only affects the first para ...

css

Don't waste time creating multiple popups for changing content - streamline your process

Challenge I've successfully extracted information from an array and displayed it dynamically in a tooltip/popup window above each photo on the page. However, with 56 different individuals at various locations, arranging them neatly in a grid poses a ...

javascriptjqueryhtmlcss

"Web fonts without a content delivery network (CDN)

When it comes to loading fonts via CDN, I am facing an issue with the requirements for a specific font. We are currently using Montserrat Light in some sections, but unfortunately, my preference according to Google Fonts does not include the 'light&ap ...

htmlfontscdn

Update links within a designated div section

How can I change the color and alignment of anchor tags within the third child div that is part of a set of three nested divs? These child divs are arranged side by side within a parent div with the class .logo-bckgrnd-rpt. Although I have successfully tar ...

csscss-selectors

What is the best way to declare media queries for resolutions both above and below 1366?

Is it possible to define different CSS files based on screen resolution in HTML? For example, one file for screens with width of 1366px or lower and another for higher resolutions. Could you kindly provide me with the correct HTML code for this? ...

htmlcssmedia-queries

The standard jQuery Mobile CSS styling does not seem to be working across various browsers, extensive testing has been conducted

I'm currently experimenting with jQuery Mobile to enhance my skills, but I'm facing issues with applying the basic CSS styling. I have included the css link from the jQuery Mobile website and ensured that I am connected to the internet. However, ...

jqueryhtmlcssjquery-mobile

The information is not being stored in Excel despite the fact that the Excel document has been generated with a header

I have been working on a project that involves fetching book details from the Google Books API and using generative AI to create descriptions for them. I have successfully created an Excel file, but I am facing an issue with saving data inside it. It' ...

htmlcssflaskgoogle-books-apidata-handling

Tips for delaying page rendering until an AJAX call finishes

While AJAX calls are known for allowing the rest of a page to load before a certain element is ready, I have a unique business requirement that complicates things. I am mandated to use AJAX due to the architecture in place. However, I cannot give the appe ...

jqueryhtmlajax

Can one use Flexbox inside another Flexbox?

I am attempting to create a layout that looks like this: +---------+---------------------+ |legend | | +---------+ | |csv_input| map | | | | | | ...

htmlcssflexbox

The "placeholder" attribute effectively populates the form input in HTML, but when using Angular 2+, the "value" attribute does not fill the input field as expected

Within my Angular UI, I have implemented an edit button that allows users to transform a member's name heading into a form for editing and updating the name. The challenge lies in ensuring that the form is pre-filled with the current name. My issue a ...

htmlangular2-formsplaceholder

Displaying the value of a jquery variable in an HTML document

I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic. My goal is to increment the transform value of a div every 5 seconds: <div style="transform: translateX(0px);" id="slide_ima ...

javascriptjqueryhtmlcss

Why isn't this code for hiding the animation and displaying it not functioning properly?

Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...

javascriptjquerycssanimation

How can you retrieve the component's state from a higher level without relying on useContext?

I have a question regarding creating expanding flex cards. I found an example on Codepen that showcases what I'd like to achieve: https://codepen.io/z-/pen/OBPJKK In my code, I have a component called HomeButtons that generates these flex cards. With ...

javascriptcssreactjsuser-interface

Press the button to access the URL within the current window

Working with Angular, I attempted to develop a function to open a URL in the current window. However, the code below within the controller actually opens a new window: $scope.openUrl = function(url) { $window.open(url); }; ...when using ng-click=&apo ...

javascripthtmlangularjs

Issue encountered while incorporating a PHP file into Javascript code

I'm facing a particular issue where I have a PHP file that is supposed to provide me with a JSON object for display in my HTML file. Everything seems to be working fine as I am receiving an output that resembles a JSON object. Here's the PHP file ...

javascriptphpjqueryhtmlajax