Changing the height of the parent div in Angular 2 to match the height of the child div that holds an image

When I make an HTTP call to fetch a block of HTML from an external source, the structure of the retrieved HTML looks like this:

<div class="container">
   <div class="wrapper">
      <div class="image">
        <img src="img_url>
     </div>
   <div class="text_wrapper>
   <div class="text>
           text...
   </div>
</div>

The retrieved HTML blocks contain multiple container divs with the same structure as mentioned above, but the images may vary in size. I am attempting to display the container divs in the following manner:

https://i.sstatic.net/3X1vk.jpg

In the image above, the image part has a width of 50% and the text has a width of 50%. I want to maintain the aspect ratio, so the images have a fixed width but the height is set to auto. This causes the images to have different heights. I want the parent div (container) to adjust its height based on the height of the image it contains. I have tried various methods using pure CSS, but have not achieved the desired results. Is there a way to achieve this behavior with pure CSS, or do I need another tool like jQuery? I am displaying the HTML in my Angular 2 application, by the way.

jquerycssangular

Answer №1

It seems like you are attempting to achieve a specific layout, although it can be challenging to pinpoint. My preference is to use the inline-flex property because of its flexibility:

jsFiddle

html

<div class="container">
   <div class="text_wrapper">
        text...
   </div>
   <div class="image">
        <img src="http://www.asfinfrastructure.com/images/project-asf-logo.jpg">
   </div>
</div>


<div class="container">
   <div class="text_wrapper">
        text...
   </div>
   <div class="image">
        <img src="https://pbs.twimg.com/profile_images/1260584600/ASF_Nederlands_LOGO.jpg">
   </div>
</div>

Additionally, here is the css code:

.container {
  display : inline-flex;
  width : 300px
}

.container > * {
  width : 50%;
  border : 2px solid #000;
}

.image {
  border-left : none;
}

.image img {
  max-width : 100%;
}

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 there a way to effectively rotate an image according to the position of my cursor, ensuring it functions correctly?

After an extensive search for similar questions, I have come across only one relevant resource which can be found here. While attempting to implement the code mentioned above, I encountered numerous failures in my individual efforts. I am pleased to prov ...

jqueryhtmlcssdreamweaver

Create a pop-up window within a single controller using Angular.js

I followed a tutorial to create this code. I am interested in learning how to utilize just one controller for generating the dialog box. Currently, I am using two controllers for this project. Any guidance or tips would be greatly appreciated. View my cod ...

javascriptjqueryangularjs

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Consider this scenario <div class="col-md-my"> </div> .xx { color: black; } .yy { color: red; } Similar to how Bootstrap adjusts width at different breakpoints. Create a new class called col-md-my When the width exceeds the ...

htmlcssbootstrap-5

Utilizing Jquery for ASP.NET, an AJAX call dynamically populates a list

My user interface is designed to populate a select dropdown menu using data retrieved from a database through an AJAX call. The C# web method responsible for this operation is structured as follows: private static List<List<string>> componentT ...

javascriptc#jqueryasp.netajax

Optimal method for retrieving data in JSON format

Hey everyone, I've been using Ajax to modify a div on my website. I have a function that works perfectly, but I'm having trouble retrieving the value it returns. updatecart = function(qty, id_product) { var currentVal, data, id, item_hash, ...

jqueryhtmljsonwoocommerce

Manipulate DIV elements with jQuery by selecting them based on their class names and then

Is there a way to use jQuery to eliminate all DIVs on a webpage while preserving their content that have the following specific pattern? <div class="ExternalClass85AC900AB26A481DBDC8ADAE7A02F039">....</div> Please note that these DIVs adhere ...

jqueryhtml

Button from Material-UI vanishes upon being clicked

I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...

javascriptcssreactjsmaterial-ui

How to replicate the content of a <template> tag using jQuery

Is there a way for me to clone the content of a tag using jQuery without losing the events associated with the child elements? ...

javascriptjquerytemplatesclone

initiating a function on a separate webpage using ajax

Our website includes an IIFE script from a third party to check for a specific URL parameter and set a cookie. However, on another page, we need to set this parameter without redirecting the user, reloading the page, or altering the third-party code. The ...

javascriptjqueryhttp

Angular tests are not reflecting HTML changes when there is a modification in the injected service

I'm currently testing a component that dynamically displays a button based on the user's login status. The user details are obtained from a service method, and the component uses a getter to access this information. Inside the component: get me ...

angularunit-testingjasmine

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...

javascripthtmljquerycssbootstrap-4

Is it possible for two Bootstrap icon class names to be used sequentially with one taking precedence over the other?

I am having an issue with toggling a class name in my code. I have a class named (bi bi-clipboard) and I want to change it to (bi-clipboard-check) when it is clicked. However, the problem is that the new class name gets added next to the existing one like ...

javascripthtmlcssbootstrap-5

Adjust the source of the HTML5 video tag based on the orientation of an iPad

I am currently coding an HTML5 page specifically for iPad Mobile Safari, which includes a video tag for embedding video files. I have successfully implemented CSS3 media queries to determine the orientation of the iPad. My next challenge is to dynamically ...

ipadhtmlvideocssmobile-safari

What is the best way to incorporate both a view and a partial view into an MVC project using JavaScript?

I am facing an issue where the order of actions being performed in my code is not as desired. I am trying to refresh the entire page after an ajax call completes a specific action, followed by loading a particular partial view. Here is my current attempt: ...

javascriptjqueryajaxasp.net-mvcvisual-studio

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Is there a way to have the Bootstrap 5 tab-pane automatically switch between tabs at set intervals, similar to a Carousel? I found a code snippet on this link, but it appears to be outdated and only works for Bootstrap 3. Could someone assist me in updati ...

javascripthtmljquerybootstrap-5

Transferring information among PHP web pages using a list generated on-the-fly

I am working with a PHP code that dynamically generates a list within a form using data from a database: echo '<form name="List" action="checkList.php" method="post">'; while($rows=mysqli_fetch_array($sql)) { echo "<input type='pas ...

phpjavascriptjquery

Utilize the JSSOR Slider to dynamically pull images from an online album, such as by integrating with an RSS Feed

My main motivation for exploring this possibility is the negative impact that loading images into the slider has on my website's performance. Is there a method to import images from an externally hosted album, such as Google Picasa albums (or any othe ...

javascriptjqueryrsssliderjssor

What is the best way to verify the number of values stored within a variable in JavaScript?

My goal is to calculate the sum of 6 values by inputting them into a single field using a button. To achieve this, I am seeking knowledge on how to determine the number of values contained within a variable. This will allow me to implement an "if" conditi ...

javascriptjquery

PHP Loop News/Image Slider with Clickable Interval Reset and Improved Unique ID Formatting

Currently, I am in the process of setting up a news/image slider on my website using JavaScript. I have the slide data coming through a PHP loop with unique IDs, which is functioning smoothly. However, I am struggling to figure out how to reset the timer/i ...

javascriptphpjquery

Inverted Scrolling Problem in Firefox

I am facing an issue with a script that inverts mouse movement for horizontal scrolling. It works fine in most browsers except Firefox. I could use some advice on how to troubleshoot this problem! $("body").mousewheel(function(event, delta) { ...

javascriptjquery