需要帮助使用CSS调整图像网格的大小
Need help resizing an image grid with CSS
我正在处理我的投资组合,无法将网格设置为100%宽度。我正在努力使网格与顶部、底部和侧面齐平。你可以在这里看到它现在的样子:
当前版本
然后这就是我试图让它看起来的方式:
实物模型版本
这是的原始代码
/**
* jQuery Expanding Grid plugin.
*
* By Dan Boulet - https://danboulet.com
*/
(function ($, window, document) {
// Enable strict mode
"use strict";
/**
* Return the last element in the current row of a grid layout.
*/
var getLastSiblingInRow = function (element) {
var candidate = element,
elementTop = element.offsetTop;
// Loop through the element’s next siblings and look for the first one which
// is positioned further down the page.
while (candidate.nextElementSibling !== null) {
if (candidate.nextElementSibling.offsetTop > elementTop) {
return candidate;
}
candidate = candidate.nextElementSibling;
}
return candidate;
};
/**
* Calculate the distance that we need to scroll the page to bring a
* section, defined as the area between the top and bottom, into view.
*/
var calculatePageScrollDistance = function (top, bottom) {
var windowScrollDistance = $(window).scrollTop(),
windowHeight = $(window).height(),
scrollDistanceToTop,
scrollDistanceToBottom;
// Scroll to the top of the section if the we are already scrolled past it.
if (windowScrollDistance >= top) {
return top - windowScrollDistance;
}
// Do nothing if there is enough space to show the section without having to scroll.
else if ((windowScrollDistance + windowHeight) >= bottom) {
return 0;
}
else {
// Find the maximum distance we can scroll without passing the top of the section.
scrollDistanceToTop = top - windowScrollDistance;
// Find the distance we need to scroll to reveal the entire section.
scrollDistanceToBottom = bottom - (windowScrollDistance + windowHeight);
return Math.min(scrollDistanceToTop, scrollDistanceToBottom);
}
};
/**
* Create the expanding preview grid.
*/
var expandingGrid = function (context, options) {
var defaults = {
animationDuration: 250,
linksSelector: '.links a',
expandingAreaSelector: '.expanding-container',
closeButtonMarkup: '<a href="#" class="close-button">Close</a>',
spacerMarkup: '<span class="spacer" aria-hidden="true"/>',
elementActiveClass: 'active',
elementExpandedClass: 'expanded',
onExpandBefore: false,
onExpandAfter: false
};
var settings = $.extend({}, defaults, options);
var isExpanded = false;
var activeLink = false;
var activeExpandedArea = false;
var activeExpandedAreaTop = false;
var activeExpandedAreaHeight = false;
var lastItemInActiveRow = false;
var activeRowChanged = false;
var checkExpandedAreaResize = false;
var $links = $(settings.linksSelector, context);
var $expandingAreas = $(settings.expandingAreaSelector, context);
var $closeButton = $(settings.closeButtonMarkup);
var $spacer = $(settings.spacerMarkup);
var $secondarySpacer = $spacer.clone();
/**
* Scroll a section of the page into view, using animation.
*/
var scrollSectionIntoView = function (top, bottom, duration, callback) {
var animate;
var scroll = 0;
var distance = calculatePageScrollDistance(top, bottom);
var windowScrollDistance = $(window).scrollTop();
var timeLeft;
// Set default duration.
duration = (typeof duration === 'undefined') ? settings.animationDuration : duration;
timeLeft = duration;
var start = new Date().getTime();
var last = start;
var tick = function() {
timeLeft = Math.max(duration - (new Date() - start), 0);
var x = (timeLeft === 0 || distance === 0) ? 0 : ((new Date() - last) / timeLeft * distance);
var diff = (distance > 0 ? Math.min(x, distance) : Math.max(x, distance));
distance = distance - diff;
scroll += diff;
window.scrollTo(0, windowScrollDistance + scroll);
last = new Date().getTime();
if (last - start <= duration) {
animate = (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
else {
if (typeof callback === 'function') {
callback();
}
}
};
tick();
};
// Process the links.
$links.each(function () {
var $this = $(this);
var targetId = $this.attr('href').match(/#([^'?]+)/)[1];
var target = document.getElementById(targetId);
if (target) {
$this.click(function (event) {
var clickedLink = this;
var scrollTargetOffset;
var closeButtonAnimationDelay;
event.preventDefault();
// Is this link already expanded?
if (isExpanded && activeLink === clickedLink) {
// Close it.
$closeButton.click();
}
// Otherwise, expand it.
else {
$links.removeClass(settings.elementActiveClass).filter($this).addClass(settings.elementActiveClass).parent('li').each(function () {
var lastSibling = getLastSiblingInRow(this);
activeRowChanged = lastSibling !== lastItemInActiveRow;
if (activeRowChanged) {
lastItemInActiveRow = lastSibling;
}
// If we are changing rows, replace spacer with secondary spacer.
if (isExpanded && activeRowChanged) {
$secondarySpacer.height($spacer.height());
$spacer.height(0).replaceWith($secondarySpacer);
}
$(lastItemInActiveRow).after($spacer);
});
if (isExpanded && activeRowChanged) {
$secondarySpacer.animate({height: 0}, settings.animationDuration, function () {
$(this).detach();
});
$closeButton.removeClass(settings.elementActiveClass).hide();
}
scrollTargetOffset = ($secondarySpacer.position().top < $spacer.position().top ? $secondarySpacer.height() : 0);
activeExpandedAreaTop = ($spacer.position().top - scrollTargetOffset);
$expandingAreas.removeClass(settings.elementExpandedClass).hide().filter(target).each(function () {
var $this = $(this);
var autoHeight = $this.height();
var autoOuterHeight = $this.outerHeight();
var initialHeight = (isExpanded && activeExpandedAreaHeight && (activeRowChanged === false)) ? activeExpandedAreaHeight : 0;
stopExpandedAreaMonitor();
$spacer.animate({height: autoHeight + 'px'}, settings.animationDuration);
$this.css({
height: initialHeight + 'px',
position: 'absolute',
left: 0,
top: $spacer.position().top + 'px'
}).show(0, function () {
// Callback.
if (typeof settings.onExpandBefore === 'function') {
settings.onExpandBefore.call(this);
}
}).animate({
height: autoHeight + 'px',
top: activeExpandedAreaTop + 'px'
}, settings.animationDuration, function () {
$this.css({height: 'auto'}).addClass(settings.elementExpandedClass);
// Set a timer to monitor changes to expanded area’s height.
activeExpandedAreaHeight = $this.height();
checkExpandedAreaResize = setInterval(function () {
var activeExpandedAreaNewHeight = $this.height();
if (activeExpandedAreaNewHeight !== activeExpandedAreaHeight) {
activeExpandedAreaHeight = activeExpandedAreaNewHeight;
syncExpandedAreaWithSpacer();
}
}, 1000);
// Callback.
if (typeof settings.onExpandAfter === 'function') {
settings.onExpandAfter.call(this);
}
});
// Scroll the page to bring the active link and preview into view.
var scrollTargetTop = $(clickedLink).offset().top - scrollTargetOffset;
var scrollTargetBottom = $this.offset().top + autoOuterHeight + 20 - scrollTargetOffset;
scrollSectionIntoView(scrollTargetTop, scrollTargetBottom);
});
// Activate close button.
closeButtonAnimationDelay = (isExpanded && activeRowChanged && ($this.parent().index() > $(activeLink).parent().index())) ? settings.animationDuration : (settings.animationDuration / 4);
$closeButton.css({
position: 'absolute',
right: 0,
top: activeExpandedAreaTop + 'px'
}).delay(closeButtonAnimationDelay).fadeIn(settings.animationDuration, function () {
$(this).addClass(settings.elementActiveClass);
});
// Set global variables.
activeLink = this;
activeExpandedArea = target;
isExpanded = true;
}
});
}
});
// Process the close button.
$closeButton.appendTo(context).hide().click(function (event) {
var $activeLink = $(activeLink);
var activeLinkTopOffset = $activeLink.offset().top;
var activeLinkBottomOffset = activeLinkTopOffset + $activeLink.outerHeight();
event.preventDefault();
// DOM manipulation and animations.
$links.removeClass(settings.elementActiveClass);
$expandingAreas.slideUp(settings.animationDuration).removeClass(settings.elementExpandedClass);
$closeButton.removeClass('active').hide();
$spacer.animate({height: 0}, settings.animationDuration, function () {
$spacer.detach();
});
// Scroll the page to bring the active link into view.
scrollSectionIntoView(activeLinkTopOffset, activeLinkBottomOffset);
stopExpandedAreaMonitor();
// Reset global variables.
isExpanded = false;
activeLink = false;
activeExpandedArea = false;
});
/**
* Stop monitoring size of expanded area.
*/
var stopExpandedAreaMonitor = function () {
if (checkExpandedAreaResize) {
clearInterval(checkExpandedAreaResize);
}
};
/**
* Match preview and spacer in height and position.
*/
var syncExpandedAreaWithSpacer = function () {
if (activeExpandedArea && isExpanded) {
$spacer.height($(activeExpandedArea).height());
activeExpandedAreaTop = $spacer.position().top;
$closeButton.add(activeExpandedArea).css({top: activeExpandedAreaTop + 'px'});
}
};
/**
* Place spacer in proper position within grid.
*/
var positionSpacer = function () {
var lastSibling;
if (activeLink && lastItemInActiveRow && isExpanded) {
// Remove spacer.
$spacer.detach();
lastSibling = getLastSiblingInRow($(activeLink).parent()[0]);
// Reposition spacer, if necessary.
if (lastItemInActiveRow !== lastSibling) {
console.log(lastSibling);
lastItemInActiveRow = lastSibling;
}
// Restore spacer.
$(lastItemInActiveRow).after($spacer);
}
};
// React to window resize.
$(window).resize(function () {
if (isExpanded) {
positionSpacer();
syncExpandedAreaWithSpacer();
}
});
};
// Create the jQuery plugin.
$.fn.expandingGrid = function (options) {
return this.each(function () {
expandingGrid(this, options);
});
};
})(jQuery, window, document);
$(document).ready(function () {
$('.expanding-grid').expandingGrid();
});
// Basic styles.
body {
background-color: #fff;
color: #333;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5;
margin: 0 auto;
max-width: 80em;
overflow-y: scroll; // Permanent scroll bar.
padding: 2em;
}
// Styles for our expanding grid.
$image-bg-color: orange;
$expanded-area-bg-color: #888;
.expanding-grid {
position: relative;
width: 100%;
.links {
display: block;
margin: 0 -1em;
overflow: hidden; // Clearfix.
padding: 1em 0;
> li {
box-sizing: border-box;
float: left;
padding: 1em;
a {
background: $image-bg-color;
color: #fff;
display: block;
font-size: 2em;
line-height: 1;
padding: 25% 1em;
position: relative;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:hover {
background: lighten($image-bg-color, 10%);
}
&.active {
background: darken($image-bg-color, 10%);
&:after {
background-color: transparent;
border-bottom: 0.375em solid $expanded-area-bg-color;
border-left: 0.375em solid transparent;
border-right: 0.375em solid transparent;
bottom: -0.5em;
content: '';
height: 0;
left: 50%;
margin-left: -0.375em;
position: absolute;
width: 0;
}
}
}
@media only screen and (max-width: 39.99em) {
width: 50%;
&:nth-of-type(2n+1) {
clear: left;
}
}
@media only screen and (min-width: 40em) and (max-width: 59.99em) {
width: percentage(1/3);
&:nth-of-type(3n+1) {
clear: left;
}
}
@media only screen and (min-width: 60em) {
width: percentage(1/4);
&:nth-of-type(4n+1) {
clear: left;
}
}
}
}
.spacer {
background-color: $expanded-area-bg-color;
clear: both;
display: block;
margin: 0 1em;
}
.expanding-container {
clear: both;
display: none;
overflow: hidden;
width: 100%;
&.expanded,
&:target {
display: block;
}
}
.hentry {
background: $expanded-area-bg-color;
box-sizing: border-box;
clear: both;
color: #fff;
min-height: 4em;
overflow: hidden; // Clearfix.
padding: 2em;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.entry-image {
box-sizing: border-box;
float: right;
margin-left: 1em;
padding: 0.25em 0 0.52em 1em;
text-align: center;
width: 50%;
}
.entry-title {
font-size: 1.5em;
}
}
.close-button {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent;
color: #fff;
display: inline-block;
height: 20px;
line-height: 1;
overflow: hidden;
padding: 1.5em 2em;
text-decoration: none;
text-indent: 5em;
white-space: nowrap;
width: 20px;
will-change: opacity;
z-index: 5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.active {
transition: opacity 0.2s;
}
&:hover {
opacity: 0.5;
}
}
}
// Style our simulated images.
.img-placeholder {
background: $image-bg-color;
color: #fff;
font-size: 4em;
font-weight: 300;
line-height: 1;
padding: 25% 0.25em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="expanding-grid">
<ul class="links">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
<li><a href="#section4">4</a></li>
<li><a href="#section5">5</a></li>
<li><a href="#section6">6</a></li>
<li><a href="#section7">7</a></li>
<li><a href="#section8">8</a></li>
<li><a href="#section9">9</a></li>
<li><a href="#section10">10</a></li>
<li><a href="#section11">11</a></li>
<li><a href="#section12">12</a></li>
</ul>
<div id="section1" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">1</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section2" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">2</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section3" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">3</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section4" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">4</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section5" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">5</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section6" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">6</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section7" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">7</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section8" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">8</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section9" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">9</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section10" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">10</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section11" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">11</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section12" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">12</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
</div>
由于某些原因,该片段在这里不起作用,但您可以在这里看到它的实际作用(没有空格):Codepen
不确定我是否完全理解你们,但这里是答案。1注意,我已经尽可能多地使用你的设置。如果这是我的项目,我会选择行之类的:为了让你的内容达到100%和100%的高度,你必须让身体有0个padding
,没有margin
,还有100%width
:
body {
background-color: #fff;
color: #333;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5;
width: 100%;
overflow-y: scroll; // Permanent scroll bar.
}
现在我们需要使网格的第一行具有0 top padding
,并且每个第一个元素0 left padding
和最后一个元素具有0 right padding
。我使用:nth-child
psuedo选择器:
.links {
display: block;
overflow: hidden; // Clearfix.
> li {
box-sizing: border-box;
float: left;
padding: 1em;
&:nth-child(-n+4){
padding-top: 0;
}
&:nth-child(4){
padding-right: 0;
}
&:nth-child(4n+1) { /* or 4n+1 */
padding-left: 0;
background-color: green;
}
&:nth-child(4n+4) { /* or 4n+1 */
padding-right: 0;
background-color: pink;
}
这是我做的钢笔:我的钢笔
尽管中间的a元素(每行的第二个和第三个元素)的大小不同,但有一个问题,因为您使用%来调整它们的大小。
我现在没有更多的时间来做这件事,但我希望我能引导你找到解决方案。
我建议你使用100vh,根据屏幕大小它会改变。
这就是您想要的吗-https://codepen.io/rupeshkumarrj/pen/jOYVxNg
body {
margin: 0;
}
.links {
margin: 0 auto;
padding: 0;
max-width: 400px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
list-style: none;
}
.links li {
background-color: lightgray;
padding: 10px;
height: 50px;
text-align: center;
}
<ul class="links">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
<li><a href="#section4">4</a></li>
<li><a href="#section5">5</a></li>
<li><a href="#section6">6</a></li>
<li><a href="#section7">7</a></li>
<li><a href="#section8">8</a></li>
<li><a href="#section9">9</a></li>
<li><a href="#section10">10</a></li>
<li><a href="#section11">11</a></li>
<li><a href="#section12">12</a></li>
</ul>
相关文章:
- 如何在浏览器宽度/高度变化时动态调整图像网格的大小
- 网格化图像,如画布上的Pinterest布局
- 使用KendoUI网格,您将如何将可选图像或图标添加到行模板中
- JQuery mobile:使用网格将多个图像垂直和水平居中
- 网格状、多响应图像
- 用javascript制作一个网格视图图像
- 使用getJSON填充动画响应图像网格
- 我该如何使网页上的图像网格可排序
- jQuery图像网格在单击以显示每个特定内容,但仅显示1个部分
- 如何在网格中随机播放图像
- 如何在网格中为“完全出血”调整图像大小
- 将 jQuery 错误处理添加到列表、网格内的 JSF 页面上的所有图像
- 将可单击的图像添加到网格
- 通过图像和 CSS 显示背景网格
- 图像网格,如 500px.com 或灯箱..com
- 获取嵌套网格视图中图像鼠标悬停的动态详细信息
- 单击时如何从网格视图中缩放图像
- IE9 中未显示图像/网格
- 通过HTML5画布上下文进行缩放,并在给定图像上绘制网格
- FlexImages移动设备上对齐的网格图像大小