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

Question

I have been trying to develop a product page for my website and I have three angles for my product images so I wanted to create a image gallery when you go to the page. The layout I am going with and the code I have so far is at this link https://jsfiddle.net/b1g2f8dh/ . My issue is I want this to be responsive so I want the .main-image img width to shrink with the page as it collapses until it gets to a min-width in which case the .angle-images div i want to shift below the main-image div and with the thumbnails laid out horizontally. My first issue is I cannot get the main image to resize despite i have width 100%. I would have thought it would scale it down as the parent container gets smaller. The second issue is I cannot figure out how to shift the second images beneath. I am getting my positions all mixed up that nothing seems to work! I plan to figure out some javascript so when you click the thumbnail it makes it the main image but thats a problem for another day ha! Any help would be appreciated. The full implementation of my code can be found here in case that helps 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

There a couple of issues with your CSS preventing it from working as you desire. The height, width, max-width, values you have are working against each other in ways that aren't immediately apparent.

It works after making the modifications below.

Using flexbox for the layout mode makes it easy to switch between column and row layouts based on a media query.

.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

Like Dan mentioned in his post, there were conflicting values. One of the issue I saw, was the size of the parent container, and the child container. I am also learning as well, and one tip I would give you is try to use border-style to help you see visually, it makes problem solving more direct and easy.It really helps when you're working with multiple div container. Then play around with what you know, and try to see how to make it fit. I decided to give a stab at this, and came up with this version. You would have to use Flex unfortunately, it just made problem solving easier. The angle and main are responsive together for now unless you were trying to make just the main responsive only, please let me know so I can take some more time later and see if I further assist you, but for now this is what I have. I hope this leads you to the right path of whatever it is you're trying to achieve.

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