0

introducir la descripción de la imagen aquí

less

.content-card {
            width: 32rem;
            border-radius: 4px;
            box-shadow: 0 2px 6px 0 rgba(154,154,154,.78);
            background: #fff;

            .content-img {

                .img-a {
                    width: 320px;
                    height: 150px;
                }
            }

            .content-texte {
                padding: 3px 20px;
                text-align: center;

                .margen-derecho {
                    margin-right: 10px;
                }

                .sub {
                    margin-top: 10px;
                    margin-left: auto;
                    margin-right: auto;

                    .card-title {
                        font-size: 12px;
                        font-family: @MuseoSans_7;
                        color: @color-purple;
                        text-transform: uppercase;
                    }
                }





                .caracteristicas {
                    padding: 0 10px;

                    .lbl-carec {
                        margin: 10px 0;
                        font-family: @MuseoSans_7;
                        color: #000;
                        font-size: 22px;
                    }
                }

                .precio {
                    margin: 10px 0;

                    span {
                        display: block;
                    }

                    .texte {
                        font-family: @MuseoSans_3;
                        font-size: 12px;
                        color: @color-gray-winp;
                    }

                    .price {
                        font-family: @MuseoSans_9;
                        color: @color-purple;
                        font-size: 24px;
                    }
                }

                .detalles {
                    margin: 10px 0;

                    a {
                        font-family: @MuseoSans_7;
                        font-size: 17px;
                        color: @color-green;
                    }
                }
            }


            .card-footer {
                .btn-agregar {
                    background: @color-green;
                    width: 100%;
                    border-radius: 0;
                    border: 0;
                    text-transform: none;
                    text-align: center !important;
                    vertical-align: middle;
                    padding: 6px 12px;
                    font-family: MuseoSans_9;
                    font-size: 19px;
                    color: #fff;
                    letter-spacing: 1px;
                }
            }
        }

html

<div class="card-hotel">
                    <div class="row">
                        <div class="col-xs-12 col-md-5 box-image">
                            <img class="card-img-top img-a" src="https://cdn.mexicodestinos.com/hoteles/hotel-moon-palace-cancun-slide-princ-min.jpg" alt="hotel bla bla">

                            <div class="destinoo">
                                <span> Playa suites Acapulco </span>
                            </div>

                            <div class="descuento_cora">
                                <span class="kokoro">
                                    <i id="kokoro" class="fh-icon fh-icon-people-icon tam"></i>
                                </span>

                                <span class="desc">
                                    40% DE DTO
                                </span>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-7 col-md-7 information">
                            <div class="title-card-hotel">
                               <span class="nombre">Hotel playa suites Acapulco ¡Todo Incluido!</span>
<%--                                <div class="table-generic">
                                    <div class="tb-col-card space-obj"></div>
                                    <div class="tb-col-card"></div>
                                    <div class="tb-col-card categorias space-obj"></div>
                                </div>--%>

                                <div class="datos-hotel">
                                    <span><i class="inser-line"><i class="fh-icon fh-icon-estrella-icon format_star"></i><i class="fh-icon fh-icon-estrella-icon format_star"></i><i class="fh-icon fh-icon-estrella-icon format_star"></i><i class="fh-icon fh-icon-estrella-icon format_star"></i></i></span>
                                    <span class="ciudad">Puerto Vallarta</span>
                                    <span class="tag-cate">Familiar</span> <span class="tag-cate">Familiar</span>
                                </div>
                            </div>

                            <div class="servicios">
                                <ul class="list-servicios">
                                    <li><i class="fh-icon fh-icon-badge"></i> 2 adultos</li>
                                    <li><i class="fh-icon fh-icon-badge"></i> 2 niños</li>
                                    <li><i class="fh-icon fh-icon-badge"></i> Habitación estandar</li>
                                    <li><i class="fh-icon fh-icon-badge"></i> Plan alimenticio</li>
                                    <li><i class="fh-icon fh-icon-badge"></i> Plan alimenticio</li>
                                    <li><i class="fh-icon fh-icon-badge"></i> Plan alimenticio</li>
                                </ul>
                            </div>

                            <div class="prices">
                                <div class="title"><span>PRECIO</span></div>
                                <div class="row">
                                    <div class="col-xs-2 col-sm-2 col-md-2 desc">
                                        <span class="money">1,999</span>
                                    </div>

                                    <div class="col-xs-4 col-sm-6 col-md-6  prec">
                                        <div class="table-generic">
                                            <div class="tb-col price-final">3,639</div>
                                            <div class="tb-col tb-top moneda-final">mxn</div>
                                        </div>
                                    </div>

                                    <div class="col-xs-6 col-sm-4 col-md-4 cont-button">
                                        <button class="btn btn-cambiar">CAMBIAR</button>
                                    </div>
                                </div>
                            </div>

                            <div class="desc-nota">
                                <span class="msg-desc">AL ELEGIR ESTE HOTEL AHORRARAS 1,000 MXN</span>
                            </div>
                        </div>
                    </div>
                </div>

El div box-imagen, no se adapta al tamaño del div padre, que es el card-hotel, de que forma puedo solucionarlo?

he intentado poniendo esto a la clase box-text

background: url(https://cdn.mexicodestinos.com/hoteles/hotel-moon-palace-cancun-slide-princ-min.jpg) no-repeat fixed center;
                background-size: cover;
                position:absolute;
                top:0;
                bottom:0;

pero ahora el div de information se pone encima de box-text

8
  • Estás utilizando algun framework? bootstrap o algo asi?
    – Turqueso
    el 28 nov. 2018 a las 17:22
  • bootstrap Y Less el 29 nov. 2018 a las 23:24
  • Qué versión de Bootstrap? la versión 4 usa flexbox y debería ser fácil hacer lo que pides con Flexbox align-items: stretch o height: 100%
    – Turqueso
    el 30 nov. 2018 a las 17:39
  • sabes si en la version 3 existe? el 30 nov. 2018 a las 19:42
  • 1
    Bootstrap 3 no usa flexbox. Con el codigo que muestras podrias usar algo como .box-image { overflow: hidden; img { height: 100%; } }
    – Turqueso
    el 30 nov. 2018 a las 20:04

1 respuesta 1

1

La solución de la posición absoluta debe funcionar, el problema es que al convertir .box-image a posición absoluta, se "desordena" el resto del grid... si agregas otro elemento .col-md-5 en ese lugar, debería mantenerse la integridad del resto del layout.

Quizá yo lo hubiese solucionado de esta manera:

/* En el media query del breakpoint md en adelante */
@media only screen and (min-width : 992px) {
    .card-img-top {
        width: 320px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        object-fit: cover;
        z-index: 1;
    }
    .descuento_cora, .destinoo {z-index: 2} /* aqui asumo que tienen posicion absoluta */
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.