Tips on adjusting the width of a div container based on the size of an

I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you.

The CSS code: 

.galleryPicBox {
    width: 100%;
    position: relative;
    height: 420px;
    padding: 0;
    text-align: center;
}

    .galleryPicBox div {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 auto;
        color: white;
        visibility: visible;
        opacity: 1;
        text-align: center;
        transition: visibility 1s, opacity 1s linear;
        _webkit_transition: visibility 1s, opacity 1s linear;
    }

    .galleryPicBox:hover div {
        visibility: hidden;
        opacity: 0;
    }

    .galleryPicBox div div {
        width: 100%;
        height: auto;
        line-height: 35px;
        background: rgba(180, 180, 180, 0.5);
    }

    .galleryPicBox div:last-child {
        position: absolute;
        bottom: 0 !important;
        padding: 5px 10px;
        line-height: 22px;
    }

    .galleryPicBox .imgStyle {
        max-height: 420px;
        max-width: 100%;
        image-orientation: from-image;
    }


the html code: 
<div id="picBack" runat="server" class="galleryPicBox" style="background:rgb(93, 147, 184);">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="imgStyle" />
        <div id="divPicDetail" runat="server">
             <div id="divPicTitle" runat="server">
                                pic Title
             </div>
             <div id="divPicContent" runat="server">
                                picContent
             </div>
         </div>
</div>

htmlcssasp.net

Answer №1

Eliminate the padding: 5px 10px; from the style presented below 

 .galleryPicBox div:last-child {
        position: absolute;
        bottom: 0 !important;
        padding: 5px 10px; // This line should be removed
        line-height: 22px;
    }


.galleryPicBox {
    width: 100%;
    position: relative;
    height: 420px;
    padding: 0;
    text-align: center;
}

    .galleryPicBox div {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 auto;
        color: white;
        visibility: visible;
        opacity: 1;
        text-align: center;
        transition: visibility 1s, opacity 1s linear;
        _webkit_transition: visibility 1s, opacity 1s linear;
    }

    .galleryPicBox:hover div {
        visibility: hidden;
        opacity: 0;
    }

    .galleryPicBox div div {
        width: 100%;
        height: auto;
        line-height: 35px;
        background: rgba(180, 180, 180, 0.5);
    }

    .galleryPicBox div:last-child {
        position: absolute;
        bottom: 0 !important;
        line-height: 22px;
    }

    .galleryPicBox .imgStyle {
        max-height: 420px;
        max-width: 100%;
        image-orientation: from-image;
    }


the html code: 
<div id="picBack" runat="server" class="galleryPicBox" style="background:rgb(93, 147, 184);">
    <img width='100%' src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="imgStyle" />
        <div id="divPicDetail" runat="server">
             <div id="divPicTitle" runat="server">
                                pic Title
             </div>
             <div id="divPicContent" runat="server">
                                picContent
             </div>
         </div>
</div>

Answer №2

To achieve this, you can utilize jquery in the following manner:

var imageWidth = $('.imgStyle').width();
var pictureBox = $('.galleryPicBox').width(imageWidth);
.galleryPicBox {
/*width: 100%; */
position: relative;
height: 420px;
padding: 0;
text-align: center;
background:rgb(93, 147, 184);
}

.galleryPicBox div {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto;
color: white;
visibility: visible;
opacity: 1;
text-align: center;
transition: visibility 1s, opacity 1s linear;
_webkit_transition: visibility 1s, opacity 1s linear;
}

.galleryPicBox:hover div {
visibility: hidden;
opacity: 0;
}

.galleryPicBox div div {
width: 100%;
height: auto;
line-height: 35px;
background: rgba(180, 180, 180, 0.5);
}

.galleryPicBox div:last-child {
position: absolute;
bottom: 0 !important;
padding: 5px 10px;
line-height: 22px;
}

.galleryPicBox .imgStyle {
max-height: 420px;
max-width: 100%;
image-orientation: from-image;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="picBack" runat="server" class="galleryPicBox">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="imgStyle" />
<div id="divPicDetail" runat="server">
<div id="divPicTitle" runat="server">pic Title</div>
<div id="divPicContent" runat="server">picContent</div>
</div>
</div>

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

Utilizing Semantic HTML to Showcase a Product Comparison

As I prepare to showcase various products on a website for customers to choose from, each with its own name, description, and list of pros and cons compared to other products, I find myself unsure about the best way to structure the HTML. While headings a ...

html

The function $.ajax may not be available, but rest assured that the jquery library is functioning properly

Upon checking the console, I noticed the following: Here is the AJAX code snippet in use: $("#accept").click(function(){ id = $("#idInput").val(); password = $("#passwordInput").val(); alert(id) alert(password) $.aja ...

jqueryhtmlajax

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Achieving full coverage of cell content within a cell area by utilizing align-items in CSS Grid

Is it possible to achieve two conflicting goals using CSS Grid? In my design, I want the content in each cell to be vertically centered using align-items: center; At the same time, I need the entire area of the cell to be filled with color. However, ...

htmlcsscss-grid

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

javascriptjqueryhtmlcss

How can I use a JavaScript or jQuery function to choose a specific audio track that is currently playing locally?

Currently, I have developed a music app that features local mp3 files triggered by clicking on divs which are linked to the audio using an onClick function with the play() method. Additionally, there is a scrolling screen that displays the song's arti ...

javascripthtmljqueryaudio

Troubleshooting the "ERR_EMPTY_RESPONSE" Error in Docker with ASP.NET Core

My attempt at constructing my first asp.net core & postgres docker-compose has been mostly successful, except for the fact that localhost won't open. Whenever I try to connect to http://localhost:5000/, I receive an ERR_EMPTY_RESPONSE. The struct ...

asp.netdocker

Dash: Streamlining the process of updating numerous elements within a callback

I am facing a challenge with my Dash app where I have multiple html.Div components that all look and are laid out similarly. When I click on a checkbox, I want all of these elements to be hidden. The common solution suggested is to create multiple outputs ...

pythonhtmlcssplotly-dashdashboard

Please insert a border shade on my navigation bar

I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...

htmlcss

My div is currently being concealed by a jQuery script that is hiding all of its

Below is the current code snippet: jQuery(document).ready(function($) { $("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() { $("#available-widgets-list div:not([id*='layers-widget']) ...

javascriptjqueryhtmlcss

How can I find the last element that was selected using XPath in the browser console

Need help with XPath: $x(("//div[@class='ag-header-row']))[1] I'm working with an array of divs, but I want to select the last one. The [1] is necessary due to multiple rows with this class. I’ve heard about using [last()], but unsure w ...

javascripthtmlxmlseleniumxpath

The list of <MyObject> elements in the razor was left open and not properly closed

I am currently working with a cshtml template that utilizes Razor for data population. One challenge I am facing is trying to access values from a specific item within a sub-list of an object being passed to the template. In the opening tag, my code snippe ...

c#asp.netasp.net-mvcrazor

Unable to send form data to app.js

Although a similar question has been asked before, I haven't been able to find a solution that works for me. I've been attempting to send HTML form data to my app.js file. Below is my index.handlebars file: <form method = 'post' a ...

htmlnode.jsexpresshandlebars.js

How can I incorporate dynamic moving lines into my website's loading sequence?

Link to Gyazo image 1: https://gyazo.com/015425f0decb187e28b620c1e3206391 Issue with first image: https://gyazo.com/dfcd33e8a4fd5bea64e51fe40556f0bf I'm currently working on a website and came up with a cool concept of having two lines crossing the s ...

htmlcss

Why isn't the hover function working on the table row element?

When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...

javascriptcssreactjs

Uncover the hidden message in a string encoded for JavaScript

This encoded HTML code is intended for use in a JavaScript function <div class=\"ProductDetail\"><div style=\"width:780px\">\r\n\t<div class=\"baslik\" style=\"margin: 0px; padding: 5px 10px ...

javascriptc#htmlencodingdecode

Excessive text in the input text area causing overflow

I am experiencing a minor issue with the primefaces inputTextArea. Whenever the text exceeds the assigned panel height, it overflows behind the next panel. Interestingly, clicking into the textarea resolves the problem temporarily, but on initial page view ...

htmleclipsejsfprimefacestextarea

Widget remains static until job triggers data refresh, preventing CSS transition initialization

I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...

htmlcsssasscss-transitionsdashing

The wonders of CSS flexbox and the power of justify-content

I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link ...

cssflexbox

Is the card-columns class not available in Bootstrap 5.0? Are there any other alternatives provided by Bootstrap besides using CSS media queries and flex column?

While exploring Bootstrap 5.0, I noticed that the card-columns class was missing and there is no mention of it or its alternative in the Bootstrap 5.0 documentation. However, it can still be found in the Bootstrap 4.6 documentation. I understand that usin ...

csstwitter-bootstrapbootstrap-4bootstrap-5