Question

我正在尝试在2x2（水平x垂直）网格中制作图像网格。当屏幕尺寸调整为较小尺寸时，我希望这些图像以1x4垂直格式显示，以便它们保留大部分尺寸。我从各种网站上找到了一些有些相关的文章，但它们的内容都填满了整个页面。这不是我想做的事情。下图显示了2x2网格应该如何显示。在网站的大小调整版本上，图像完全可以填满整个屏幕。我该怎么做呢？

我现在已经包含了一些截图，说明了我希望最终产品看起来如何粗略，但用图像代替红色方块。
e.g. desktop resolution
e.g. smartphone resolution

.imageLineTop {
	display: inline-block;
	width: 100%;
	height: 725px;
	top: 60%;
	left: 50%;
	transform: translate(50%, 50%);
}

.imageLineBottom {
	display: inline-block;
	margin-top: 45px;
	width: 100%;
	height: 725px;
	top: 60%;
	left: 50%;
	transform: translate(50%, 50%);
}

#img0 {
	height: 700px;
}

#img1 {
	height: 700px;
}

#img2 {
	height: 700px;
}

#img3 {
	height: 700px;
}

#fadeBox0 {
	width: 478px;
	height: 700px;
	background-color: black;
	opacity: 0.5;
	left: 24%;
	position: absolute;
	display: none;
}

#fadeBox1 {
	width: 478px;
	height: 700px;
	background-color: black;
	opacity: 0.5;
	right: 24%;
	position: absolute;
	display: none;
}

#fadeBox2 {
	width: 478px;
	height: 700px;
	background-color: black;
	opacity: 0.5;
	left: 24%;
	position: absolute;
	display: none;
}

#fadeBox3 {
	width: 478px;
	height: 700px;
	background-color: black;
	opacity: 0.5;
	right: 24%;
	position: absolute;
	display: none;
}

	<!--Top image line-->
		<section class="imageLineTop">
			<img class="discoverImage" id="img0" src="assets/imgs/1.jpg">
			<img class="discoverImage" id="img1" src="assets/imgs/2.jpg">

			<section id="fadeBox0">
				<h3 class="imageInlineTitle">Purity.</h3>
			</section>

			<section id="fadeBox1">
				<h3 class="imageInlineTitle">Style.</h3>
			</section>
		</section>

		<!--Bottom image line-->
		<section class="imageLineBottom">
			<img class="discoverImage" id="img2" src="assets/imgs/3.jpg">
			<img class="discoverImage" id="img3" src="assets/imgs/4.jpg">

			<section id="fadeBox2">
				<h3 class="imageInlineTitle">Integrity.</h3>
			</section>


			<section id="fadeBox3">
				<h3 class="imageInlineTitle">Courage.</h3>
			</section>
		</section>

Answer 1

我不太确定你的最终目标是什么，但是一旦窗口小于实际尺寸，你就可以让你的图像进入新的线条：

# rails40/depot_g/db/migrate/20121130000005_combine_items_in_cart.rb
def up
  # replace multiple items for a single product in a cart with a single item
  Cart.all.each do |cart|
    # count the number of each product in the cart
    sums = cart.line_items.group(:product_id).sum(:quantity)
    sums.each do |product_id, quantity|
      if quantity > 1
        # remove individual items
        cart.line_items.where(product_id: product_id).delete_all
        # replace with a single item
        item = cart.line_items.build(product_id: product_id)
        item.quantity = quantity
        item.save!
      end
    end
  end
end

在这种情况下，请记住不要使用百分比宽度。

请参阅下面的小提琴。希望它有所帮助。

https://jsfiddle.net/7rtb084r/

2x2图像响应图像网格

1 个答案: