0

estoy intentando hacer un código para poner 2 textos en una imagen:

El primero texto estará arriba a la izquierda. El segundo estará en el pie de la imagen.

Además siempre estos textos deberán posicionarse en esa posición, independientemente del alto y el ancho de la imagen, he probado varias imágenes y parece que funciona bien.

El problema es que cuando el texto del pié de la imagen es muyyy largo y la imagen es estrechita, el texto desborda, en vez de eso, quisiera que el texto fuera hacía arriba (hacía la mitad de la imagen) en vez del comportamiento típico que tiende a bajar y a salirse de la imagen.

<!doctype html>
<html>
<head>


  <style>
  .contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}

.texto-encima{
    position: absolute;
    top: 10px;
    left: 10px;
}
.centrado{
    position: absolute;
    top: calc(95% - 15px);
 }>
</style>
  </head>
<body>


<div class="contenedor">
  <img src="img/uploads/probar-10p.jpg" />
  <div class="texto-encima">arriba izq</div>
  <div class="centrado">Centrado texto en el pie</div>
</div>
</body>
</html>

3 respuestas 3

3

es un cambio muy fácil, simplemente sustituye top: calc(95% - 15px); por bottom: 0; de esta manera obligas al texto seimpre estar abajo y sin salirse de los bordes.

1

Aca te dejo unos ejemplos de como podrias hacer, en practica es crear un contenedor en el cual insertas el div con el contenido del texto que queres poner, utilizando las clases que mete los div, en este caso, en posicion absoluta definiendola con la ayuda de top, bottom, left, right.

en el caso del texto centrado utiliza una tecnica que en lo personal me gusta mucho, que seria poner un top: 50% y un left: 50% añadendo un traslado de -50% sobre los dos ejes : transform: translate(-50%, -50%);

/*contenedor*/
.container {
  position: relative;
  text-align: center;
  color: white;
}
/*abajo a la izquierda*/
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* arriba a la izquierda*/
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* arriba a la derecha */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/*abajo a la derecha*/
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/*centrado*/
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-centered{
  position: absolute;
  bottom: 6px; 
  left: 50%;
  transform: translatex(-50%);
}
<div class="container">
  <img src="https://images.clarin.com/2016/09/26/Sk4P_k6F4l_1256x620.jpg" alt="Snow" style="width:100%;">

  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>

  <div class="centered">Centered</div>
  <div class="bottom-centered">este es el texto que no se tendria que salir del borde, osea desbordarse : Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. </div>
</div>

ahi agregue una nueva clase : bottom-centered, en esta clase utilize el translatex(-50%) teniendo un left(50%) para centrarlo. y le puse un bottom: 6px; que te permitirà tener el div a una distancia minima con el fondo.

espero que te sea de ayuda, exitos

este codigo fue tomado de esta pagina en ingles.

0

Para meter un texto dentro de una imagen deberias tienes que usar las

y dentro de unos .Te mando en este link una idea de como seria: http://regardis.com/como-poner-texto-encima-de-una-imagen-con-html-css/. Un saludo.

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.