未调整宽度的图像宽度:100%

Question

我一直在尝试为我的网站开发一个产品页面，我的产品图像有三个角度，所以我想在您访问该页面时创建一个图像库。到目前为止，我使用的布局和代码都在这个链接上https://jsfiddle.net/b1g2f8dh/。我的问题是，我希望这是有响应的，所以我希望.main图像img宽度随着页面的收缩而缩小，直到它达到最小宽度，在这种情况下，我希望.angle图像div移动到主图像div下方，缩略图水平排列。我的第一个问题是，尽管我有100%的宽度，但我无法调整主图像的大小。我本以为它会随着父容器变小而缩小。第二个问题是我不知道如何转移下面的第二个图像。我把我的立场搞得一团糟，好像什么都不管用！我计划想出一些javascript，这样当你点击缩略图时，它就会成为主图像，但这将是一个问题，下一天哈！如有任何帮助，我们将不胜感激。我的代码的完整实现可以在这里找到，以防有帮助https://www.printperry.com/home/product-page/index.php

<div class="product-images">
<div class="angle-images">
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">  
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">  
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">  
</li>
</div>
<div class="main-image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt=""> 
</div>
</div>
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: block;
}
.angle-images{
padding:5px 0px;
width: 120px;
display: inline-block;
float:left;
max-height: 700px;
}
.main-image{
width: 80%;
height: 600px;
float: left;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
float: right;
margin:5px 10px;
}
.main-image img {
width: auto;
height:700px;
}

Answer 1

CSS存在一些问题，无法按您的意愿工作。你所拥有的高度、宽度、最大宽度等值正在以一种不明显的方式相互作用。

它在进行以下修改后工作。

使用flexbox作为布局模式可以轻松地根据媒体查询在列和行布局之间切换。

.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-flow: column nowrap;
flex-direction: column-reverse;
}
@media (min-width: 768px) {
.product-images {
flex-flow: row nowrap;
}
}
.angle-images{
padding:5px 0px;
width: 120px;
max-height: 700px;
display: flex;
}
@media (min-width: 768px) {
.angle-images {
flex-flow: column nowrap;
}
}
.main-image{
width: 80%;
height: 600px;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
margin:5px 10px;
}
.main-image img {
max-width: 100%;
}

Answer 2

就像Dan在帖子中提到的那样，存在着相互冲突的价值观。我看到的一个问题是父容器和子容器的大小。我也在学习，我想给你的一个建议是尝试使用边框样式来帮助你从视觉上看问题，它使解决问题更加直接和容易。当您使用多个div容器时，它确实会有所帮助。然后利用你所知道的，试着看看如何让它适合你。我决定尝试一下，并提出了这个版本。不幸的是，您将不得不使用Flex，它只是让解决问题变得更容易。角度和主要是一起反应的，除非你试图只让主要反应，请告诉我，这样我以后可以花更多的时间，看看我是否会进一步帮助你，但现在这就是我所拥有的。我希望这能引导你走上正确的道路，实现你想要实现的目标。

<div class="product-images">
<div class="angle-images">
<ul class="angle-ul">
<li class="angle-li angle-li-1">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class="angle-li angle-li-2">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class=" angle-li angle-li-3">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</ul>
</div>
<div class="main-Image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>

* {
margin: 0;
padding: 0;
}
.product-images {
height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: warp;
border-style: dotted;
}
.angle-images {
width: 100px;
border-style: dotted;
}
.angle-ul {
}
.angle-li img {
width: 100%;
}
.main-Image img {
height: 100%;
width: 100%;
}