1

Buenas tardes,

Tenía dos consultas que quizás sean sencillas de resolver.

He puesto al pie de dos imágenes un recuadro gris para poder mostrar texto. En realidad al final será una colección de 9 imágenes, pero quería ver el efecto en dos imágenes primero (adjunto captura).

Mis dos preguntas son las siguientes:

  • En ambas imágenes el recuadro se sale un poquito por debajo, ¿cómo podría hacer para que se quedara al borde de la imagen?

  • Cuando escribo más o menos texto, el recuadro gris se redimensiona. ¿Habría alguna posibilidad de dejarlo en tamaño fijo?

Aquí está el código:

<style>
   .img-texto {
    position: relative;
    float: left;
   }
   .img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #848282;
    padding: 60px;
    color: #fff;
    font-family: sans-serif;
    opacity:0.8;
    font-size: 20px;
    }

</style>

    <div class="img-texto">
    <img src="img/img1.png" alt="" height="900" width="670" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span>
    </div>
    <div class="img-texto">
    <img src="img/img2.png" alt="" height="900" width="670" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span>
    </div>

¿Podéis echarme una mano por favor?

Muchas gracias :-)introducir la descripción de la imagen aquí

1
  • 1
    Bienvenido a Stackoverflow, deberías subir las imágenes que estás usando a algún banco de imágenes para poder ejecutar tu código en el snippet y ayudarte de manera más facil Commented el 22 nov. 2017 a las 13:13

6 respuestas 6

3

Espero que esto mas o menos sea lo que quieres lograr saludos

.img-texto {
    position: relative;
    float: left;
   }
   .img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #848282;
    padding: 20px;
    color: #fff;
    font-family: sans-serif;
    opacity:0.8;
    font-size: 15px;
    height: 20%;
        overflow: auto;
    }
    
   *{
    margin:0px;
    padding:0px;
   } 
    
    .con-imagenes {
        width: 100%;
        height: 100vh;
        position: relative;
        background: rgb(55, 181, 144)
    }
    .img-texto{
         width: 50%;
         height: 100%;
         position: relative;
         background: rgb(113, 64, 252)
       }
   .img-texto img {
    height: 100%;
    width: 100%;
    background: rgb(55, 181, 144);
   }
<section class="con-imagenes">
    <div class="img-texto">
    <img src="https://i.imgur.com/LX3Ax38.jpg" alt="" height="900" width="670" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span>
    </div>
    <div class="img-texto">
    <img src="https://i.imgur.com/IslWmbg.png" alt="" height="900" width="670" />
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span>
    </div>
      </section>

para el espacio en blaco abajo es por el browser que agrega un margin

si quieres un height de 100% de la pantalla usa en el .img-texto

height:100vh;

y para la segunda pregunta ponle al span display:block y un height: 300px; y overflow:auto;

.img-texto {
 position: relative;
 float: left;
}
.img-texto span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: #848282;
padding: 60px;
color: #fff;
font-family: sans-serif;
opacity:0.8;
font-size: 20px;
/* nuevos attr */
display:block;
height: 300px;
overflow:auto
}
2

Tengo varias recomendaciones que hacerte para la solución a tu problema:

  1. Acostúmbrate a resetear los valores que los navegadores colocan por defecto a las propiedades margin y padding, para ello puedes usar el selector universal de css.

    *{
        margin: 0;
        padding: 0;
    }
    
  2. No controles el tamaño de un elemento colocando los atributos width y height directamente en la etiqueta, para eso existe CSS y puedes hacerlo desde allá.

  3. El tamaño lo debe tener el contenedor .img-texto y no la etiqueta <img>

  4. Debes ser organizado en la estructura de tu flujo de nodos, si vas a tener información en texto (título y descripción) ¿por que no colocas un <div class="informacion"></div> para que quede más organizado y sea más fácil aplicar estilos ?

  5. Para que la altura del div.informacion no se altere dependiendo su contenido puedes usar la propiedad max-height la cual evita que la altura sobrease el valor que coloques y para que el contenido se siga viendo puedes usar la propiedad overflow con la cual puedes agregar un scroll en caso de que el contenido supere el max-height

(Ejecuta el snippet en pantalla completa)

Si tienes alguna otra inquietud con gusto la resolveré.

*{
    margin: 0;
    padding: 0;
}

.img-texto{
    position: relative;
    float: left;
    width: 50%;
    height: 900px;
    overflow: hidden;
}

.img-texto img{
    width: 100%;
}

.img-texto .informacion{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #848282;
    opacity:0.8;
    padding: 20px 50px 50px 50px;
    font-family: sans-serif;
    max-height: 112px;
    overflow: auto;
}

.img-texto .informacion h2{
    font-size: 20px;
    text-transform: uppercase;
    color: green;
    margin-bottom: 20px;
}

.img-texto .informacion p {
    color: #fff;
    font-size: 20px;
    width: calc(100% - 100px);
    text-align: justify;
}
<div class="img-texto">
    <img src="http://2.bp.blogspot.com/-y1OVOafP3v0/UfBVoq9N-1I/AAAAAAAAAR4/rykjxIaxh9Q/s1600/picture15.jpg" alt=""/>

    <div class="informacion">
        <h2>Titulo imagen 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
</div>
<div class="img-texto">
    <img src="http://2.bp.blogspot.com/-y1OVOafP3v0/UfBVoq9N-1I/AAAAAAAAAR4/rykjxIaxh9Q/s1600/picture15.jpg" alt=""/>

    <div class="informacion">
        <h2>Titulo imagen 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
</div>

1

Parece ser que hay algún tipo de bug (es una suposición mía, no he podido encontrar ninguna referencia) cuando utilizas los atributos height y width de HTML.

Como alternativa para que no se salga el recuadro por abajo te propongo hacerlo solamente con CSS, es decir, ponerle la anchura y altura al div que contiene tanto la imagen como el span, y asignarle una anchura y altura a la imagen del 100%.

De esta manera, la imagen se ajusta completamente al contenedor y no se "queda corta".

Por otro lado, si quisieras que el recuadro gris no se redimensionara le podrías asignar una altura y una anchura mediante CSS.

Tu ejemplo modificado:

.img-texto {
    position: relative;
    float: left;
    height: 900px;
    width: 670px;
}

.img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #848282;
    padding: 60px;
    color: #fff;
    font-family: sans-serif;
    opacity:0.8;
    font-size: 20px;
}

.img-texto img{
  height: 100%;
  width: 100%;
}
<div class="img-texto">
   <img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png" alt="" />
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span>
</div>
<div class="img-texto">
   <img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png" alt="" />
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</span>
</div>

1

Intenta eliminando el line height para la imagen…

<style>
.img-texto {
    position: relative;
    float: left;
    line-height: 0;
}
.img-texto span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #848282;
    padding: 60px;
    color: #fff;
    font-family: sans-serif;
    opacity:0.8;
    font-size: 20px;
    line-height: initial;
}

1

Muchísimas gracias por vuestra ayuda :-)

Siguiendo vuestras recomendaciones he construido el código que os muestro a continuación. Aun así, tengo todavía un par de dudas.

  1. Me gustaría que las dos cajas donde está el texto tuvieran una altura fija, que no se redimensionen con el texto, y que el texto no tuviera efecto de scroll (la barra ya está oculta, pero cuando el texto es largo, como el imagen 2, se puede subir y bajar con la ruleta del ratón).

  2. También querría que la caja donde están los textos se ajustara automáticamente al contenedor principal. En principio estás imágenes estarán metidas en una tabla, pero cuando tengamos todo dominado quizás lo reconstruyamos en css.

Muchas gracias de nuevo :-)

*{
margin: 0;
padding: 0;
}

.img-texto {
position: relative;
float: left;
height: 900px;
width: 670px;
overflow: hidden;
}

.img-texto img{
width: 100%;
}

.img-texto .informacion{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
background: #848282;
opacity:0.8;
padding: 60px;
font-family: sans-serif;
max-height: 112px;
overflow: auto;
}

.img-texto .informacion h2{
font-size: 26px;
text-transform: uppercase;
color: #acc454;
margin-bottom: 10px;
}

.img-texto .informacion p {
color: #fff;
font-size: 20px;
width: calc(100% - 100px);
text-align: justify;
}
<div class="img-texto">
<img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png" alt="" /></a>
<div class="informacion">
    <h2>IMAGEN 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>

<div class="img-texto">
<img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png.jpg" alt="" /></a>
<div class="informacion">
    <h2>IMAGEN 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>

-1

1- mira a los recuadros les estas diciendo position:absolute , desde ese momento se rigen por las coordenadas top,left,bottom,right que le des y se despegan del div, y si le estableces bottom:0 se pegan al borde de abajo, al parecer las imagenes (img) tienen un margin-bottom que las despega del borde de abajo y por eso notas que el recuadro gris llega mas abajo que las imágenes, también revisa que si .img-texto que tiene la imagen dentro tiene un padding-bottom , también podría ser el que despega la imagen del fondo

2- ponle el width y el height que desees al recuadro, luego en las propiedades, le pones overflow:auto, y cuando el texto sea muy grande , se mantendrá el tamaño y lo que ara sera mostrar un scroll para ver el siguiente contenido

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.