Question 49512 in Photoshop Question posted in
The official user guide can be found here.

Image doesn't display as its defined – Photoshop

I want all the image to be displayed in the same size grid layout even though all of the images will be in different sizes.

Image doesn’t fill the black space even though i set the max width, height and backgroud-size.

How should i set the default image size to display on the screen?

I would really appreciate your help.

enter image description here

.person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: greenyellow;
  border-style: none;
}

.item {
  width: 250px;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #CCC;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img3 {
  background-size: contain;
  max-width: 200px;
  max-height: 200px;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">

<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group">
    </div>

    <div id="products" class="row list-group">

      <!-- Single product -->
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end Single product -->

      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/house2_gs4cr6.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/sofa_xlb0hz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/pink_fby5uh.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/couch_o9wlyx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/greysofa_pjqko4.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/blue_dfokic.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/orange_hlsunx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/weird_yp8qxn.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- partial:index.partial.html -->
Tags:

3

Answers


  1. 0

    Set width to 100% and height to your preferred value adding !important clause to override bootstrap height on img

    .person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: greenyellow;
  border-style: none;
}

.item {
  width: 250px;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #CCC;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img3 {
  background-size: contain;
  width: 100%;
  height: 200px !important;
}
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">

<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group">
    </div>

    <div id="products" class="row list-group">

      <!-- Single product -->
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end Single product -->

      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/house2_gs4cr6.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/sofa_xlb0hz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/pink_fby5uh.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/couch_o9wlyx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/greysofa_pjqko4.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/blue_dfokic.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/orange_hlsunx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/weird_yp8qxn.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- partial:index.partial.html -->
    Login or Signup to reply.
  2. 0

    I added some flex css to help with that. I added comments in the css where I added flex:

    Notice that this method does not stretch your images. Just the card height changes.

    .person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: greenyellow;
  border-style: none;
}

.item {
  width: 250px;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #CCC;
  align-items: stretch;                      /* added */
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img3 {
  background-size: contain;
  max-width: 200px;
  max-height: 200px;
}

#products {                                /* added */
  display: flex;                           /* added */
  flex-wrap: wrap;                         /* added */
}
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">

<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group">
    </div>

    <div id="products" class="row list-group">

      <!-- Single product -->
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end Single product -->

      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/house2_gs4cr6.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/sofa_xlb0hz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/pink_fby5uh.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/couch_o9wlyx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/greysofa_pjqko4.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/blue_dfokic.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/orange_hlsunx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/weird_yp8qxn.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- partial:index.partial.html -->
    Login or Signup to reply.
  3. 0

    You should use percents instead of pixels in your CSS because you are using bootstrap’s sizing.

    If you want to use pixels, you have to override bootstrap, to do this add !important to the width prop of the item class and to the height, width props of the img3 class.

    Working example

    .person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: greenyellow;
  border-style: none;
}

.item {
  width: 250px !important;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #CCC;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img3 {
  background-size: contain;
  height: 200px !important;
  width: 200px !important;
}
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">

<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group">
    </div>

    <div id="products" class="row list-group">

      <!-- Single product -->
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end Single product -->

      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/house2_gs4cr6.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/sofa_xlb0hz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/pink_fby5uh.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/couch_o9wlyx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520529781/greysofa_pjqko4.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/blue_dfokic.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/orange_hlsunx.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520532750/weird_yp8qxn.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/furniture_sddzpz.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img3" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/greysofa_ys6lwl.png" alt="" />
          <div class="person">
            <p class="person-name">Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- partial:index.partial.html -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search