简体   繁体   English

自动溢出,滚动,属性不起作用

[英]overflow auto, scroll, property is not working

I found this Theme which I've really fallen in love with. 我发现了这个我真的很喜欢的主题。

start bootstrap template 启动引导程序模板

I want to make my Portfolio website with this theme but here is the few changes I want it to make it happen. 我想以这个主题创建我的Portfolio网站,但是这是我希望它实现的一些更改。

When you click any of those thumbnails, other image will pop out right, which is the main image that you want it to showcase. 单击这些缩略图中的任何一个时,其他图像将向右弹出,这是您要显示的主要图像。 I want that image to be big, maybe 1280 px and overflow auto or scrollable 我希望该图片较大,可能为1280像素,并自动或滚动溢出

I gave parent div overflow property auto , but it didn't work. 我给了父div溢出属性auto ,但是没有用。 Then, I changed to scroll , still not working 然后,我更改为滚动 ,仍然无法正常工作

Here is the HTML: 这是HTML:

<section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter popup-gallery">
            <div class="col-lg-8 col-lg-offset-2 text-center portfolio_text_padding">
                <h2 class="section-heading">Portfolio</h2>
                <hr class="light color">
                <p class="text-faded portfolio">
                    Portfolio time another word it is time to showcase the work.
                </p>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="img/portfolio/bkg.png" class="portfolio-box" >
                    <img src="img/portfolio/thumbnails/1.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

So the image I what to put inside of those thumbnails is 1400px by 2000px and the idea I got this from behance 所以我要在这些缩略图中放入的图像是1400px x 2000px,这是我从behance得到的想法

Thank you so much. 非常感谢。

https://css-tricks.com/almanac/properties/o/overflow/ https://css-tricks.com/almanac/properties/o/overflow/

Here in this fiddle you can give it a try 在这里,您可以尝试一下

http://jsfiddle.net/x58RD/ http://jsfiddle.net/x58RD/

#mydiv {
    overflow: auto;
    max-width: 800px;
    max-height: 600px;
}

Replace the URL in the HTML with this: http://abduzeedo.com/sites/default/files/styles/home_cover/public/originals/wpw_1400px.jpg?itok=IeiXQvLh 用以下内容替换HTML中的URL: http : //abduzeedo.com/sites/default/files/styles/home_cover/public/originals/wpw_1400px.jpg?itok=IeiXQvLh

and then click run 然后点击运行

Hope this will help out :) Let me know 希望这会有所帮助:)让我知道

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM