Ta sama wysokość na karcie i img

Question 1

Próbuję zrobić owl-carousel z kartami. Muszę pomóc w dwóch sprawach. Najpierw jak przyciąć obraz do tego samego rozmiaru na każdej karcie i wyśrodkować go. I druga rzecz, jak zrobić wszystkie karty o tej samej wysokości. Próbowałem wielu rzeczy, ale nic nie działa i nie wiem, czy jest jakaś kolizja z css owl-carousel lub problem we mnie

.cards {
    width: 100%;

}
a{
    text-decoration: none;
    color: black;
}
h1 {
    padding: 1rem;
}
p{
    padding: 0 1rem;
}
.card{
    
    height: 500px;
    position: relative;
    border: 1px solid gray;
    border-top: none;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
}
img.img_slide{
    width: 100%; 
    height: auto;
}
button{
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 30px;
    background-color: #27ae60;
    color: #fff;
    position: absolute;
    bottom: 2%;
    right: 5%;
}
@media only screen and (max-width: 450px){
    h1{
        font-size: 1.5rem;
        padding: .3rem;
    }
    p {
        padding: .3rem;
        word-wrap: break-word;
    }
    .card{
        height: 400px;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>



    <div class="cards owl-carousel">
        <a href="#" class="jobs_link"><div class="card item">
            <img src="https://zelenaruza.sk/wp-content/uploads/2016/01/i_179285.jpg" alt="" class="img_slide">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem </p>
            <button>Read more</button>
        </div></a>
        <a href="#" class="jobs_link"><div class="card item">
            <img src="https://zelenaruza.sk/wp-content/uploads/2016/01/logo.jpg" alt="">
                    <h1>Lorem ipsum</h1>
            <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem </p>
            <button>Read more</button>
        </div></a>


    </div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:40,
    responsiveClass:true,
    responsive:{
        0:{
            items:1.2,
            nav:false,
            margin:10
        },
        600:{
            items:2.2,
            nav:false
        },
        900:{
            items:3.5,  
            nav:false
        },
        1500:{
            items:4,
            nav:false
        },
        1700:{
            items:4,
            nav:false,
            margin:100
        }
    }
})
</script>

javascript jquery html css owl-carousel

0

Miroslav 19 listopad 2019, 18:52

Aby przyciąć obrazy, użyj <div> o stałym rozmiarze i atrybucie background-image. Do precyzyjnego dostrojenia użyj background-size i background-position. Ale napotkasz problemy z drugim obrazem, w którym musisz dostosować pozycjonowanie, aby poprawnie wyświetlać tekst. Podobnie użyj kontenera o stałej wysokości dla tekstu i utwórz hover effect, scroll-bar lub read more link, aby upewnić się, że wszystko jest czytelne

–

Lapskaus

19 listopad 2019, 19:00

Zauważ, że NIE ma metody CSS wyrównywania wysokości elementów, które nie mają wspólnego rodzica.

–

Paulie_D

19 listopad 2019, 19:27

Answer

Po pierwsze, moim ulubionym sposobem tworzenia łatwo skalowalnego obrazu jest wykonanie następujących czynności:

HTML:

<div class="thumbnail"></div>

CSS:

.thumbnail {
    padding-top: 100%; // - This will create a square. 1:1
    background: red;
}

Teraz, gdy masz już ładny, skalowalny obraz, pora przejść do kart. Niektóre z nich być może trzeba będzie rozszyfrować, ale powinno działać względnie dobrze.

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.thumbnail {
  padding-top: 50%;
  width: 100%;
  background: red;
}

.card {
  flex-basis: 25%;
  border: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.content {
  margin-bottom: 1em;
}

.btn {
  margin-top: auto;
  display: block;
}

<div class="row">
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I am some content!
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
</div>

1

Halden Collier 19 listopad 2019, 19:33

Question 2

Po pierwsze, moim ulubionym sposobem tworzenia łatwo skalowalnego obrazu jest wykonanie następujących czynności:

HTML:

<div class="thumbnail"></div>

CSS:

.thumbnail {
    padding-top: 100%; // - This will create a square. 1:1
    background: red;
}

Teraz, gdy masz już ładny, skalowalny obraz, pora przejść do kart. Niektóre z nich być może trzeba będzie rozszyfrować, ale powinno działać względnie dobrze.

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.thumbnail {
  padding-top: 50%;
  width: 100%;
  background: red;
}

.card {
  flex-basis: 25%;
  border: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.content {
  margin-bottom: 1em;
}

.btn {
  margin-top: auto;
  display: block;
}

<div class="row">
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I am some content!
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
</div>

1

Halden Collier 19 listopad 2019, 19:33

Ta sama wysokość na karcie i img

1 odpowiedź

Podobne pytania

Nowe pytania