HTML фото галерея - убрать пробел - PullRequest
Новая
       31

HTML фото галерея - убрать пробел

0 голосов
/ 12 ноября 2018

У меня есть фотогалерея в HTML / CSS, и у меня есть пространство между 2 фотографиями.Я хочу, чтобы пространство было как на фото (слева) 

.portfolio-img {
  width: 45%;
  height: 100%;
  margin-top: 2rem;
  margin-left: 1rem;
}
<div class="container">
  <div class="row">


    <img src="images/img3.jpg" class="portfolio-img">
    <img src="images/img1.jpg" class="portfolio-img">
    <img src="images/img2.jpg" class="portfolio-img">
    <img src="images/img4.jpg" class="portfolio-img">

  </div>
</div>

Check Image

Ответы [ 3 ]

0 голосов
/ 12 ноября 2018

Вы задаете рост в %, пожалуйста, измените его на px

.portfolio-img {
  width: 45%;
  height: 300px; /* ---> give height it as you want */
  margin-top: 2rem;
  margin-left: 1rem;
}
<div class="container">
  <div class="row">


    <img src="images/img3.jpg" class="portfolio-img">
    <img src="images/img1.jpg" class="portfolio-img">
    <img src="images/img2.jpg" class="portfolio-img">
    <img src="images/img4.jpg" class="portfolio-img">

  </div>
</div>
0 голосов
/ 12 ноября 2018

На сайте w3school есть хороший пример

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

В итоге вы используете display flex и делите изображения на столбцы

Это результат для вашего дела 

.container {
  display: flex;
  flex-wrap: wrap;
}
.row {
  flex: 50%;
  max-width: 50%;
}
.portfolio-img {
  width:100%;
  vertical-align: middle;
}
<div class="container">
  <div class="row">
    <img src="https://images.pexels.com/photos/1089562/pexels-photo-1089562.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">
    <img src="https://images.pexels.com/photos/1037996/pexels-photo-1037996.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter marketing">
  </div>
  <div class="row">
    <img src="https://images.pexels.com/photos/1037995/pexels-photo-1037995.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="portfolio-img filter development">
    <img src="https://images.pexels.com/photos/1037999/pexels-photo-1037999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="portfolio-img filter design">
  </div>
</div>
0 голосов
/ 12 ноября 2018

Вы можете использовать 

.porfolio-img {
    width: 45%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

background-size: cover, чтобы исходное изображение покрывало область тега img.

...