-1

estoy teniendo problemas con una imagen que luego de rotarlo se sale de su contenedor, sin rotar está bien, al rotarlo se rompe todo, la etiqueta la coloco dinámicamente con appendChild() desde javascript en un contenedor con tamaño fijo de 192px x 384px (2x4 Pulgadas):

Aquí coloco la imagen:

<div id="labelImg" style="height: 384px;width: 192px;"></div>

Aquí es donde convierto el contenido de un DIV a imagen, la roto y la coloco en el contenedor:

var hs = this
var aLabel = document.getElementById('printArea')

htmlToImage.toSvg(aLabel, { height: '192px', width: '384px' }).then(function (dataUrl) {
  var img = new Image()
  img.src = dataUrl
  img.style.transform = 'rotate(-90deg)'
  img.style.width = '384px'
  img.style.height = '192px'
  document.getElementById('labelImg').appendChild(img);
  hs.label = false
})

y éste es el resultado:

Se sale del contenedor

como ven se sale del contenedor, cómo podría solucionar eso?

Gracias.

ACTUALIZACION

hice estos cambios, contenedor:

.image-container {
  width: 192px;
  height: 384px;
  border: 1px solid black;
  overflow: hidden;
}

el código javascript con el estilo de la imagen:

htmlToImage.toSvg(aLabel, { height: '192px', width: '384px' }).then(function (dataUrl) {
  var img = new Image()
  img.src = dataUrl
  img.style.transform = 'scale(1) rotate(-90deg)'
  img.style.zIndex = '0'
  img.style.aspectRatio = 19.2 / 38.4
  document.getElementById('labelImg').appendChild(img);
  hs.label = false
})

resultado:

Sigue sin entrar en el contenedor

Sigue sin entrar en el contenedor.

ACTUALIZACION 2

Utilizando la solución de Guillermo Sheil sí entra en el contenedor, pero ahora el contenedor que aloja ese contenedor con la imagen no actualiza el alto, ese econtenedor es un flex-box que usa el framework QUASAR, se supone que el alto se hace automático, este es el resultado:

Se sale

este es el html:

<div class="row justify-center">
  <div class="col-auto">
    <div id="labelImg" class="image-container"></div>
  </div>
</div>
2
  • Intente agregando overflow: hidden; al css de la imágen o bien agregando una clase css que se agrega al div de la imagen o se elimina según este rotada o no, es decir una clase css con un alto y ancho cuando esta normal y otra con otro alto y ancho cuando este rotada . Commented el 18 ene. 2023 a las 22:54
  • gracias @RichardVíquezPérez intenté colocarle el overflow: hidden como me indicas, ,pero sigue sin entrar en su contenedor, sólo esconde la parte que se sale del contenedor, lo que necesito es que la imagen esté dentro del contenedor como en la imagen en mi pregunta donde está sombreada. Commented el 18 ene. 2023 a las 22:59

3 respuestas 3

0

Si te entendí bien es bastante sencillo. Es recomendable que las imágenes tengan un contenedor. Utilizo el transform: Rotate() en el contenedor el cual hace que la imagen gire.

Busca aplicar esto a tu código, es difícil darte una solución sin ver el código plano.

Si te sirvió porfa dale "Me Gusta" así me sube la reputación y puedo seguir ayudando al resto, ya que al ser nuevo limitan mis respuestas.

.contenedor{
    width: 200px; /*ancho del contenedor*/
    height: 100px; /*alto del contenedor*/
    transform: rotate(-90deg); /*Roto el contenedor el cual hace rotar la imagen*/
    
}

.contenedor__foto{
    width: inherit; /*Hereda el ancho del contenedor*/
    height: inherit; /* Hereda el alto del contenedor*/
    object-fit: cover; /*En mi caso uso object-fit: cover para que se adapte la imagen si perder calidad */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css"  >
    <title>Document</title>
</head>
<body>
    <div class="contenedor">
           <img src="foto.jpg" class="contenedor__foto">
    </div>
</body>
</html>

introducir la descripción de la imagen aquí

PD: No sale foto porque no puse url para que no salga mucho texto!

1
  • Gracias @Guillermo Sheil, ahora sí entra en el contenedor, pero ahora ese contenedor se sale también de su contenedor, he actualizado mi pregunta con los resultados. Commented el 19 ene. 2023 a las 13:14
0

Estuve indagando sobre el tema de la función rotate() en css, leí que su transformación es sólo visual, por eso no respeta los demás estilos, por lo que tuve que agregar varias propiedades de la solución propuesta por @Guillermo Sheil:

.contenedor{
    width: 200px; /*ancho del contenedor*/
    height: 100px; /*alto del contenedor*/
    transform: rotate(-90deg); /*Roto el contenedor el cual hace rotar la imagen*/
    margin-top:25%;
}

#labelImg {
  padding:100% 0 0
}

Html:

<div class="row justify-center">
  <div class="col-auto" style="height: 400px;">
    <div id="labelImg">
      <div class="image-container" id="rotated"></div>
    </div>
  </div>

  <div class="col-auto">
    <q-btn color="dark" label="Imprimir" @click="Imprimir" />
  </div>
</div>

Y así quedó:

Solucion

1
  • Suena a que había un height: auto en alguna parte, y lo estás sobreescribiendo.
    – padaleiana
    Commented el 19 ene. 2023 a las 13:44
-1

intenta : al contenedor padre, en css añade la propiedad de posición absoluta

.image-container {
  width: 192px;
  height: 384px;
  border: 1px solid black;
  overflow: hidden;
  position: absolute;
}
1
  • 1
    Esto parece un comentario. ¿Puedes editar la pregunta explicando un poco más y mostrar en código la solución que planteas?
    – Mateo
    Commented el 19 ene. 2023 a las 1:32

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.