I have a div with the class of "container" and I need to adjust the height of this container based on the dimensions of the image it contains.
Here is the HTML structure:
<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
And here is the CSS code:
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
}
.item {
width: 100%;
border-radius: 3px
}
Any suggestions on how I can achieve this?
If you're looking to solve this issue, try using the CSS property display: inline-block for the container of the image and remove any extra white space by setting display: block.
Using inline-block will help create a shrink-to-fit height and width around the image (and link if applicable).
.container {
border: 1px dotted blue; /* added for demonstration purposes */
display: inline-block;
}
.container img {
display: block;
}<figure class="container">
<a class = "123">
<img class="item" src="http://placehold.it/200x100">
</a>
</figure><figure class="wrapper">
<a class = "image-link">
<img class="content" src="...">
</a>
</figure>
.wrapper {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
height: auto;
overflow: auto;
}
.content {
width: 100%;
border-radius: 3px
}
The wrapper will encompass the image and adapt accordingly.
Prior to initializing the container, it's important to specify which image you intend to use inside the container. Retrieve the dimensions of the image to assist with setting up inline styling accordingly.
<?php
$img = "insert URL of your image here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
<a class = '123'>
<img class='item' src='$img'>
</a>
</figure>
";
?>
I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...
When a user selects a value in a textbox and clicks the submit button, the selected value disappears. <div class="panel-body" ng-repeat="patient in $ctrl.patient | filter:$ctrl.mrd"> <form> <div class="form-group"> ...
I am trying to adjust the HTML Canvas element so that its width matches the width of the browser window and its height matches the height of the browser window. Below is the code snippet I am using: HTML: <body> <canvas id="gameCanvas" ...
What are the advantages of using the nth function in CSS instead of applying it through jQuery, especially considering its compatibility with IE? Is it better to simply use jQuery from the start and avoid using it in a stylesheet altogether? Hopefully thi ...
Is there a way to create a line break in a specific place within a button group on a certain screen size? I have a button group with 4 buttons in a row, and I would like to split it into two lines after the first button if there isn't enough space. ...
Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...
Here's an idea I have in mind: Alan 12 | Byron 104 Alfred 54 | Charles 33 Ann 28 | Cleopatra 7 Basil 133 | Corey 199 ...
I am trying to calculate the product of two input fields and display it without submitting the form. I have incorporated an array and included functionality to add/delete rows, with an onchange function to calculate the product. This solution works well ...
Previously, everything was working fine until it suddenly broke. The column system switches to a 100% width single column at 1500px, but for some reason, the text overflows off the screen around 700px and I can't figure out why. The text at the bottom ...
Have you ever wondered if it's possible to alternate the color of each character in an input field? For example, switching between red, green, and blue for each character. I've seen people achieve this by dynamically wrapping characters in a span ...
I have implemented an accordion control extender on my webpage, and it is functioning properly. I added a CSS file to display it as a list, which is working perfectly in all browsers except for IE compatibility view. In IE compatibility view, the list-styl ...
While working on the subnavigation of a website, I encountered an issue with the link Suite «Mont Blanc», which was pulled from the backend. The desired format for this link was: Suite «Mont Blanc» However, t ...
Encountering a problem with Chrome 40.0.2214.93 where overriding the justify-content for an element results in unexpected behavior. For reference, here is a JS Fiddle showcasing the issue: http://jsfiddle.net/n670tmeu/ html <header id="top"> & ...
I am in the process of developing a feature on my website that will enable the admin to update player stats for the current season using a simple HTML form. However, I am facing some challenges in optimizing and making the script more efficient. To popula ...
Recently, I've been tinkering with updating a file in my GitHub repository using code to set up an automated system for pushing changes without manual intervention. My approach involved creating a function that utilizes a GitHub access token to ' ...
Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...
Hey there! I'm currently working on a project where I need to upload an image with comments added into a database using a combination of PHP, AJAX, and HTML. Let me show you the HTML part first: <form name="form1" enctype="multipart/form-data" ac ...
Having trouble with bullets displaying in IE9+? Check out this link for more information: I've attempted to fix the issue by creating an ie.css file using conditional comments, but it hasn't worked. Can anyone provide assistance? ...
I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...
Looking for some advice on React as a newbie here. I'm wondering whether each React component should have its own stylesheet. For instance, if I have my main App component that gets rendered to the browser, is it sufficient to include a CSS file the ...