I have a fixed width and height div where I want to include an image with a caption (using img and figurecaption) without exceeding the parent's dimensions.
Here is what I attempted: `
parent->
height: 100px;
width: 100px;
margin: 0;
img->
display: block;
height: 100%;
width: 100%;
figurecaption->
text-align: center
`
However, when the image is larger than the specified height and width, the caption overflows. How can I prevent this from happening? Thank you.
If you want to ensure that both the image and the caption stay within the boundaries of the parent container, there are a few options available to you. One approach is to set the image's max-height and max-width to 100% and then position the caption on the bottom. If you prefer to keep them completely separate, you can use the following code:
#container {
height: 400px;
width: 300px;
border: 1px solid #000000;
text-align:center;
}
#image {
max-height: calc(100% - 50px);
max-width: 100%;
}
#caption {
background: #282828;
max-height: 50px;
width: 100%;
text-align: center;
color: #ffffff;
}<div id="container">
<img id="image" src="http://www.fixedstars.com.au/images/runBack.jpg">
<div id="caption">This is the caption</div>
</div>This code ensures that the image's maximum height is equal to 100% minus the height of the caption. If you want the caption to always be at the bottom of the container, regardless of the image's size, you can set the container to position: relative and the caption to position: absolute; bottom:0;.
If you want to resolve this issue, you need to ensure the Image has a width and height set to 100%.
For your convenience, below is a complete demonstration.
We hope this solution proves beneficial for you.
<style>
.mydiv {
border-color: red;
border-style: solid;
height: 50px;
width: 80px;
}
.imgStyle {
height: 100%;
width: 100%;
}
</style>
<html>
<div class="mydiv">
<img src="http://www.boltoday.com/wp-content/uploads/2014/10/only-3d-natural-1024x768.jpg" class="imgStyle" />
Your Text Goes Here
</div>
</html>I am looking to combine the variable $variable with the input value using JavaScript $variable= file_get_contents('./env.txt'); <select id="customer_id" name="customer_id" w300 required pj-chosen" data-msg-required=&q ...
Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...
I am currently working on a program that tallies the number of reactions from Facebook posts, with each reaction stored in an aria label containing detailed information. I am encountering difficulty retrieving the values of these unique aria labels due to ...
For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...
Below is the HTML code: <a title="Login" data-href="/MyAccount/Access/Login" data-title="Admin" data-entity="n/a" id="loginLink" class="nav-button dialogLink"><b>Login</b></a> <a title="Register" data-href="/MyAccou ...
In my CSS file, I have defined styles for mini icons like this: /* Total counts - mini icons */ span.count-facebook { background: #fff url(../images/mini-icons/facebook.png) no-repeat 1px center; } span.count-plusone { background: #fff url(../images/mini- ...
Currently tackling the responsive design aspect of my website, however, I've encountered a bug specifically with mobile devices. Interestingly, testing it on my desktop browser proves smooth sailing, but when attempting on my iPhone, I faced some chal ...
I am struggling with echoing a large amount of PHP and HTML code. Despite trying the obvious solutions, I am unable to make it work: <?php echo ' <?php if ( has_post_thumbnail() ) { ?> <div class="gridly-image"><a href="< ...
Seeking a solution for incorporating common HTML elements into web pages? Look no further. In this scenario, the "Footer Section" and "Bulletin" are recurring components across all site pages. While it may seem minor, the goal is to consolidate these state ...
I attempted to achieve a specific effect with my code snippet: .mask { width: 200px; height: 200px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(http://lapen ...
I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...
I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...
Have you seen the stunning navbar on this website? It appears to merge with the background upon loading, then smoothly shifts to the top of the page as you scroll. The transition is accompanied by a lovely animation. I am curious about the steps needed to ...
As a beginner in three.js and JavaScript, I am excited about the possibilities and have been creating small Three.js scenes to improve my skills. My ultimate goal is to build a 3D website, but I am currently stuck on how to allow users to upload an image f ...
How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...
When I call the Bootstrap 5 modal from a dropdown, it only shows a grey background instead of the content. What could I be missing? You can find the code in this JSFiddle link: <div class="container"> <div class="row"> ...
If you imagine a container div that is 100px wide, and inside it there are 3 smaller divs each 20px wide. I am wondering how to align these smaller divs so that they are centered within the container div, with a 20px gap on each side? ...
Currently, I am developing a project in Laravel and focusing on the CRUD operations, specifically working on the Update functionality. I have a button within a modal that allows me to edit dates, including a dynamic select option. The table with the butto ...
I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...
Is it feasible to implement a category in the drop-down menu using jQuery? For example: Southern Suburb suburb1 suburb2 suburb3 suburb4 Northern Suburb suburb5 suburb6 Appreciate your help! ...