Javascript 图像宽度不调整宽度：100%

我一直在尝试为我的网站开发一个产品页面，我的产品图片有三个角度，所以我想在你进入页面时创建一个图片库。我将使用的布局和到目前为止的代码都在这个链接中。我的问题是我希望这是响应，所以我希望.main image img宽度随着页面的折叠而收缩，直到达到最小宽度，在这种情况下，.angle images div我希望移动到主image div的下方，并将缩略图水平放置。我的第一个问题是，尽管我有100%的宽度，但我无法调整主图像的大小。我原以为它会随着父容器变小而缩小。第二个问题是我不知道如何移动下面的第二个图像。我把我的立场弄得一团糟，似乎什么都不管用！我计划找出一些javascript，所以当你点击缩略图时，它会使它成为主图像，但这是另一天的问题哈！任何帮助都将不胜感激。我的代码的完整实现可以在这里找到，以防有帮助

.产品形象{
最大高度：700px；
最大宽度：700px；
宽度：100%；
显示：块；
}
.角度图像{
填充：5px0px；
宽度：120px；
显示：内联块；
浮动：左；
最大高度：700px；
}
.主图像{
宽度：80%；
高度：600px；
浮动：左；
利润率：10px；
}
.angle images li{
列表样式：无；
填充顶部：50px；
}
.角度图像{
宽度：100px；
浮动：对；
利润率：5x10px；
}
.主图像img{
宽度：自动；
高度：700px；
}

您的CSS存在一些问题，使其无法按您的意愿工作。“高度”、“宽度”、“最大宽度”和“值”的相互作用方式并不明显

在进行以下修改后，它可以工作

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

。产品图片{
最大高度：700px；
最大宽度：700px；
宽度：100%；
显示器：flex；
柔性流动：柱状nowrap；
弯曲方向：柱反向；
}
@介质（最小宽度：768px）{
.产品形象{
flex-flow：行nowrap；
}
}
.角度图像{
填充：5px0px；
宽度：120px；
最大高度：700px；
显示器：flex；
}
@介质（最小宽度：768px）{
.角度图像{
柔性流动：柱状nowrap；
}
}
.主图像{
宽度：80%；
高度：600px；
利润率：10px；
}
.angle images li{
列表样式：无；
填充顶部：50px；
}
.角度图像{
宽度：100px；
利润率：5x10px；
}
.主图像img{
最大宽度：100%；
}

就像丹在他的帖子中提到的那样，存在着相互冲突的价值观。我看到的一个问题是父容器和子容器的大小。 我也在学习，我给你们的一个建议是尝试使用边框样式来帮助你们直观地看到，它使问题的解决更加直接和简单。当你们使用多个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%;
}

* {
保证金：0；
填充：0；
}
.产品形象{
高度：700px；
最大宽度：700px；
宽度：100%；
显示器：flex；
弯曲方向：行；
柔性包装：经纱；
边框样式：虚线；
}
.角度图像{
宽度：100px；
边框样式：虚线；
}
角度ul{
}
李英明{
宽度：100%；
}
.主图像img{
身高：100%；
宽度：100%；
}

在

中将宽度更改为100%，将高度更改为自动。主图像img

我认为这已接近我的需要。但是，在733px宽时，主图像在角度图像下方切换。有没有办法让主图像img的宽度缩小到我通过@media查询设置的某个最小宽度，然后在角度图像位于horizontall下方的位置进行切换？我曾尝试过flex box方法，但由于某种原因无法正常工作。我现在就来试试，看看它是怎么工作的。我喜欢这个主意，但是当我尝试这个想法的时候，屏幕越窄，主图像和缩略图之间的差距就越大。可能有一些额外的css弹性条件来保持间距一致？我更改了。主图像img到height:auto，因此它不会更改主图像的纵横比。这太接近我想要的了。然而，我希望缩略图角度图像不收缩，并说在最小宽度535px的主图像下水平移动。看看你的css，我不知道为什么它们会缩小，因为你设置了。角度图像的宽度等于100px，而不是一个百分比。这怎么可能？另外，感谢你的指点，我想我会在学习时开始使用虚线边框，因为它看起来很有用。它会完全收缩，因为我将图像设置为随容器收缩。

<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%;
}