Question

所以我正在使用scss和一些简单的Jquery制作一个简单的库。单击图像时，它会在div中展开并在下面显示一些描述性文本。这是通过.3s动画完成的。

一切在技术上都可以正常工作，但是随着div开始扩展，该段落导致高度比宽度的扩展快得多，以便将文本包含在该段落中。

我知道为什么会发生此问题，并且我已经尝试过诸如将高度设置为0;宽度：100％;然后只扩大高度，但似乎不起作用。

有人可以建议一种简单的方法来阻止这种行为吗？

显示问题的图像：

https://ibb.co/h90ewK

https://ibb.co/dmtciz

https://ibb.co/jUjNGK

https://ibb.co/mBaUwK

代码示例：

图片：

<div class="col span_1_of_3">
    <img src="https://intellidesign.000webhostapp.com/img/gallery-pg3-img1.jpg"         alt="Yellowstone National Park" 
        class="gallery__image"
        image-description="A gorgeous image of Yellowstone National Park at sunset"
        image-author="Unknown">
</div>

点击图像时，它会插入到该div中：

<div class="gallery__selected-image">
    <div class="gallery__selected-image-container" style="height: 100%; 
    margin: 0;">
        <img class="gallery__selected-image-full-width" src="">
    </div>
    <div class="row" style="height: 100%; margin: 0; padding: 2px 0 2px 0;">
        <div class="col col-1-of-3" style="height: 100%; margin: 0;">
            <h1 class="gallery__selected-image-author"></h1>
        </div>
        <div class="col col-2-of-3" style="height: 100%; margin: 0;">
            <p class="gallery__selected-image-description" style="width: 0;"></p>
        </div>
    </div>
</div>

scss / css：

&__selected-image {
background-color: white;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 10px;
top: 50%;
left: 50%;
width: 0;
height: 0;
box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
transition: all .6s;

  &-shown {
    width: 73%;
    height: auto;
  }

  &-full-width {
    max-width: 100%;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
  }

  &-author {
    height: 100%;
    padding: 1% 0 1% 0;
  }

  &-description {
    font-size: 1.5rem;
    height: 100%;
  }

}

jQuery-仅供参考，我知道这不是很好，但是目前可以使用，稍后我会再讲到它：

$(".gallery__image").click(function(){
        //Extract image information from clicked element
        let imgDescription=$(this).attr('image-description');
        let imgAuthor = $(this).attr('image-author');
        let imgUrl = $(this).attr('src');

        //Assign information to image popup
        $('.gallery__selected-image-full-width').attr('src', imgUrl);
        $('.gallery__selected-image-author').text(imgAuthor);
        $('.gallery__selected-image-description').text(imgDescription).css('width', '100%');

        //Fade out gallery and fade in image popup
        $(currentPage).fadeOut('slow');
        $('.gallery__pagination').fadeOut('slow');
        $('.gallery__selected-image-background').addClass('gallery__selected-image-background-shown');
        $('.gallery__selected-image').addClass('gallery__selected-image-shown');

引起扩展的段落看起来很奇怪

0 个答案: