Shift the position of an <img> downwards by 50% of its height while maintaining the flow of the elements

Consider this snippet of code below

<div>
    <img src="http://www.lorempixel/100/200" />
    <p>
        Bla bla bla bla
    </p>
</div>

I am trying to figure out how to move the image 50% of its height and also adjust the position of the <p> tag. Any suggestions?

  • Using margin and padding percentages is based on the width of the parent element
  • The top property can only be applied to elements with certain positions without affecting nearby elements
  • The translate function does not impact layout positioning

One approach could involve storing image ratios in an attribute then moving the image by 50% divided by its ratio (utilizing its height). However, there seems to be no way to use this attribute in CSS as attr() cannot be used outside of a content context.

Additionally, I prefer to avoid using JavaScript for handling resize events.

Given that it's a responsive website, hardcoding margin values is not ideal.

Am I overlooking an obvious solution here?

Thank you

csshtmlresponsive-design

Answer №1

If you're unable to locate another solution, consider using JQuery with the code snippet provided at this link. HTML

<div class="somediv">
  <img class="image" src="http://placehold.it/350x150">
  <p>
      Bla bla bla bla
  </p>
</div>

JS

var imageHeight = $('.image').height() / 2;
$('.somediv').css('margin-top', imageHeight);

EDIT

Added dynamic resizing functionality

$(window).resize(updateMargin);
$(document).ready(updateMargin);

function updateMargin() {
    var imageHeight = $('.image').height() / 2;
    $('.somediv').css('margin-top', imageHeight);
}

Answer №2

$('img').each(function () {
    var height = $(this).height();
    height = height / 2 + 'px';

    $(this).css('margin-top', height);
});

JSFiddle Link

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

Is it possible in Javascript to trace the origins of a particular element's property inheritance for debugging purposes?

I'm currently dealing with an issue where the computed style font-size of a particular element is "16px". I've been attempting to pinpoint where in the CSS or JavaScript this font size setting is coming from, specifically within one of its parent ...

javascripthtmlcssdebuggingproperties

How can I align Javascript output vertically in the middle?

I am currently facing an issue with a JavaScript clock displaying in a narrow frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { ...

javascripthtmlcssvertical-alignment

Equal row sizes in the Bootstrap framework

I am trying my best to explain the situation. Currently, I am utilizing bootstrap for a project where I have two columns - one containing an image on the left and the other with a title and description on the right. My goal is to make the photo fill the en ...

htmlcssimagetwitter-bootstrapbootstrap-4

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Within different sections of my website, we display banner ads that are loaded in real-time from third-party sources and come in various sizes. I'm interested in adding a transparent overlay image to each ad which would allow me to trigger a click ev ...

javascriptjquerycss

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block pr ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

Hey there! I'm diving into the world of JavaScript and HTML, and I need some guidance on creating a menu that can toggle visibility of specific content in div(s) depending on which button (picture1-12) is clicked. My idea is to have one div that can d ...

javascripthtmlcss

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

htmlcsscenteringnavigationbar

Accessing an Android device from localhost using a hostname with ever-changing IP addresses

SCENARIO: I am currently running a local webpage on a WAMP server from my computer, which is connected to a wireless network. Additionally, I have an Android tablet also connected to the same network. OBJECTIVE: My goal is to access the local webpage on ...

networkingmobiletcpiphtml

Create a dynamic and interactive website using a combination of jQuery and AngularJS

I recently came across an interesting tidbit on the FAQs of Angular stating that "Angular can use jQuery if it's present in your app when the application is being bootstrapped". This got me thinking, is it considered a best practice to include both j ...

javascriptjqueryhtmlangularjs

Can you explain the distinction between using .classA versus .classB.classA when styling with CSS?

When I use .show instead of .box.show in the CSS, the even boxes do not come from the left side. This discrepancy has left me puzzled as I assumed they would have the same effect. However, it appears that in this particular code snippet, they are behaving ...

javascripthtmlcsscss-selectors

There are three checkboxes, one of which is independent of the others and requires jQuery to not consider it part of the collection

Initially, I crafted a query that perfectly met the business requirement until there was a change of heart. Uncheck checkbox if checked with jquery The implementation of this code was flawless $('input[type="checkbox"]').on('change' ...

javascriptjqueryhtmlcheckbox

The fixed background-attachment feature does not function properly in Chrome when it is contained within a scrolling div

Essentially, if a background image is placed within a scrolling div, it will no longer remain fixed and will revert back to scrolling: CSS: <div class="wrapper"> <span></span> </div> HTML: html, body{ width: 100%; height: ...

cssgoogle-chromebackground-imagebackground-position

Creating a Fixed Footer with CSS

Another question on the same topic, with a twist. Despite trying various solutions found in countless articles, none seem to work for me. My familiarity with HTML/CSS is limited due to just a few months of off-and-on practice. Hence, I'm seeking help ...

css

Static CSS box positioned above dynamic scaling box

Let's Think About It <div id="foo"> Lorem ipsum </div> <div id="bar"> sit amet </div> Is there a way to maintain the size of foo as it is while allowing bar to fill the remaining space on the page when the window size cha ...

css

Use CSS to mimic the :hover functionality for touchscreen devices

I am struggling to get this piece of code to function correctly, $(document).ready(function() { $('.hover').bind('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); ...

jquerycsshover

Reveal and conceal using CSS animations

I am working on adding animation effects to show and hide HTML elements triggered by a button click. The button toggles a "hide" class to display or hide the element. Check out my code snippet: const toggleButton = document.querySelector('button ...

javascripthtmlcss

An issue occurred while attempting to read words from JSON file

My current issue involves loading words from JSON into my webpage. The images are functioning properly, thankfully. I have already successfully loaded the necessary images through JSON onto my webpage. However, I am still in need of loading words through ...

javascriptjqueryhtmlcssjson

Improperly positioned Divs overlapping

Help needed: I am attempting to add a menu to a specific section. The menu div is extending off the page to the right, but it should be contained within the HOMEMENU section (the long black bar with no content). Despite using a clear:both div, the menu s ...

cssxhtmlhtml

When is the appropriate time to nest CSS class selectors within other class selector definitions?

REVISED 1 After receiving feedback, I made the following changes: .lower-container { justify-content: center; position: absolute; width: 92vw; // height: 46vh; <--- no set height /* nested classes for adjusting position and height of low ...

css

The issue arises when HTML tables with unique IDs are all displaying the same value from an AJAX callback

This situation has been incredibly frustrating for me!! Let me explain what's going on - I have a callback data coming from my AJAX post method that needs to be passed to seven different HTML tables. Although I successfully received the data from the ...

javascriptphphtmlajaxsymfony