Get the size of a div in pixels

Asked

Viewed 83 times

-1

I want to make a grid of images where they fit. I had already done the Divs grid and just wanted to put the background of an image, but when I try the images are wrong. How do I get the pixel value of each div?

<!-- GRID DE CATEGORIA -->
<section class="vc_section categories-section vc_custom_1592415464709 vc_section-has-fill et_custom_uniqid_new_5eea546b9dc7d">
<div data-vc-full-width="true" data-vc-full-width-init="false" class="vc_row wpb_row vc_row-fluid vc_custom_1519888573271 et_custom_uniqid_5f1adcc48efcc mpc-row">



<div class="category-1 wpb_animate_when_almost_visible wpb_left-to-right left-to-right wpb_column vc_column_container vc_col-sm-4 vc_col-has-fill et_custom_uniqid_5f1adcc48ef92 mpc-column" data-column-id="mpc_column-915f1adcc640451"><!-- MUDAR FUNDO AQUI CATEGORIA 1 -->
    <div class="vc_column-inner vc_custom_1519802774236" style="background:url(branco.png) center no-repeat !important;">
        <div class="wpb_wrapper">
            <div class="vc_row wpb_row vc_inner vc_row-fluid vc_row-o-content-middle vc_row-flex et_custom_uniqid_5f1adcc48ef41 mpc-row">
                <div class="dashed-border wpb_column vc_column_container vc_col-sm-12 mpc-column" data-column-id="mpc_column-345f1adcc640332" >
                    <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                            <h2 style="font-size: 36px;color: #ffffff;line-height: 36px;text-align: center" class="vc_custom_heading capitalize vc_custom_1594131769982">
                                <a href="https://makobaby.com.br/categoria/enxoval/">Enxoval</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="category-3 wpb_animate_when_almost_visible wpb_zoomIn zoomIn wpb_column vc_column_container vc_col-sm-5 vc_col-has-fill et_custom_uniqid_5f1adcc48ef92 mpc-column" data-column-id="mpc_column-195f1adcc640c0a">
    <div class="vc_column-inner vc_custom_1519802796319" style="background:url(vermelho.png) center no-repeat !important;"><!-- MUDAR FUNDO AQUI CATEGORIA 4 -->
        <div class="wpb_wrapper">
            <div class="vc_row wpb_row vc_inner vc_row-fluid et_custom_uniqid_5f1adcc48ef41 mpc-row">
                <div class="dashed-border wpb_column vc_column_container vc_col-sm-12 mpc-column" data-column-id="mpc_column-655f1adcc640afa">
                    <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                            <h2 style="font-size: 36px;color: #ffffff;line-height: 36px;text-align: center" class="vc_custom_heading capitalize vc_custom_1594131812786">
                                <a href="https://makobaby.com.br/categoria/conjuntos/">Conjuntos</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="category-4 wpb_animate_when_almost_visible wpb_right-to-left right-to-left wpb_column vc_column_container vc_col-sm-3 vc_col-has-fill et_custom_uniqid_5f1adcc48ef92 mpc-column" data-column-id="mpc_column-825f1adcc6413ec">
    <div class="vc_column-inner vc_custom_1519802786702" ><!-- MUDAR FUNDO AQUI CATEGORIA 4 -->
        <div class="wpb_wrapper">
            <div class="vc_row wpb_row vc_inner vc_row-fluid et_custom_uniqid_5f1adcc48ef41 mpc-row">
                <div class="dashed-border wpb_column vc_column_container vc_col-sm-12 mpc-column" data-column-id="mpc_column-185f1adcc6412bc">
                    <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                            <h2 style="font-size: 36px;color: #ffffff;line-height: 36px;text-align: center" class="vc_custom_heading capitalize vc_custom_1594131844787">
                                <a href="https://makobaby.com.br/categoria/portas-bebe/">Porta Beb&ecirc;</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



</div>
<div class="vc_row-full-width vc_clearfix"></div>
<div data-vc-full-width="true" data-vc-full-width-init="false" class="vc_row wpb_row vc_row-fluid categories-section vc_custom_1519888580946 et_custom_uniqid_5f1adcc48efcc mpc-row">



<div class="category-2 wpb_animate_when_almost_visible wpb_zoomInLeft zoomInLeft wpb_column vc_column_container vc_col-sm-4 vc_col-has-fill et_custom_uniqid_5f1adcc48ef92 mpc-column" data-column-id="mpc_column-415f1adcc641f85">
    <div class="vc_column-inner vc_custom_1519802838956" style="background:url(rosa.png) center no-repeat !important;"><!-- MUDAR FUNDO AQUI CATEGORIA 5 -->
        <div class="wpb_wrapper">
            <div class="vc_row wpb_row vc_inner vc_row-fluid et_custom_uniqid_5f1adcc48ef41 mpc-row">
                <div class="dashed-border wpb_column vc_column_container vc_col-sm-12 mpc-column" data-column-id="mpc_column-845f1adcc641e63">
                    <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                            <h2 style="font-size: 36px;color: #ffffff;line-height: 36px;text-align: center" class="vc_custom_heading capitalize vc_custom_1594131869278">
                                <a href="https://makobaby.com.br/categoria/babete/">Conjuntos</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="category-5 wpb_animate_when_almost_visible wpb_fadeInUp fadeInUp wpb_column vc_column_container vc_col-sm-4 vc_col-has-fill et_custom_uniqid_5f1adcc48ef92 mpc-column" data-column-id="mpc_column-775f1adcc642762">
    <div class="vc_column-inner vc_custom_1519802824469" style="background:url(cinza.png) center no-repeat !important;" ><!-- MUDAR FUNDO AQUI CATEGORIA 5 -->
        <div class="wpb_wrapper">
            <div class="vc_row wpb_row vc_inner vc_row-fluid et_custom_uniqid_5f1adcc48ef41 mpc-row">
                <div class="dashed-border wpb_column vc_column_container vc_col-sm-12 mpc-column" data-column-id="mpc_column-185f1adcc64264b">
                    <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                            <h2 style="font-size: 36px;color: #ffffff;line-height: 36px;text-align: center" class="vc_custom_heading capitalize vc_custom_1594131936130">
                                <a href="https://makobaby.com.br/categoria/enxoval/mantas/">Mantas</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="category-6 wpb_animate_when_almost_visible wpb_zoomInRight zoomInRight wpb_column vc_column_container vc_col-sm-4 vc_col-has-fill et_custom_uniqid_5f1adcc48ef92 mpc-column" data-column-id="mpc_column-295f1adcc642f0c">
    <div class="vc_column-inner vc_custom_1519802846321"><!-- MUDAR FUNDO AQUI CATEGORIA 6 -->
        <div class="wpb_wrapper">
            <div class="vc_row wpb_row vc_inner vc_row-fluid et_custom_uniqid_5f1adcc48ef41 mpc-row">
                <div class="dashed-border wpb_column vc_column_container vc_col-sm-12 mpc-column" data-column-id="mpc_column-765f1adcc642df4">
                    <div class="vc_column-inner">
                        <div class="wpb_wrapper">
                            <h2 style="font-size: 36px;color: #ffffff;line-height: 36px;text-align: center" class="vc_custom_heading capitalize vc_custom_1594131959873">
                                <a href="https://makobaby.com.br/categoria/enxoval/toalha/">Toalha</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</div><div class="vc_row-full-width vc_clearfix"></div></section>

This is my grid code, I wanted to get the exact or approximate pixel size of each one, would it be possible?

php html div pixels

  • Wrong as? What’s wrong in the grid?

  • The grid nothing, however at the time of putting a photo, the snaps are not perfect, I’ve tried several sizes and nothing, so I just wanted to know the size of this correct div, to put a background in image, this using center, no repeat

  • Have you tried with background-size: cover; ?

  • I was able to, but this 1 gave problem, this must be in relation to the image size print: https://prnt.sc/tpc11b

1 answer

2


I’ll answer your question, but I really don’t know if she’ll solve your problem...

You can use the method .getBoundingClientRect() and take the height and width of the element. You can read a documentation about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Note that in the console will return the width and height of div, plus 2px concerning the border ;)

let el = document.getElementById("meuElemento").getBoundingClientRect();
console.log('largura: ' + el.width, 'altura: ' + el.height);
#meuElemento {
  width: 200px;
  height: 150px;
  border: 1px solid #000;
}
<div id="meuElemento">123</div>

  • It says that the value is empty, even if I did a search to see if I get the value of Classname, gave the same problem

  • @Christianobourguignon It is pq maybe you have to use a . foreach() to catch the . querySelectorAll() depends on the way you are doing in your JS, but there is another question and I recommend you open another question...

  • I would be able to enter in my site and to obtain the value there, one thing I discovered is that the width is 1004 px

  • @Christianobourguignon has yes, enter your site opens the Devtools Console and runs the Script there

  • Perfect, I’ll try it

  • The strange thing is that when I type, display becomes None

  • Nothing appeared on the console yet

  • Can you test? site in question is makobaby.com.br

  • @ChristianoBourguignon https://prnt.sc/tqmwh5

Show 4 more comments

Browser other questions tagged php html div pixels

You are not signed in. Login or sign up in order to post.