La imagen no permanecerá dentro del borde div

Preguntas WordPress
⏰ 2 minutos de lectura

avatar de usuario
yo no sé mejor

Sitio web: isfnpub.com

En este momento, estoy usando relleno adicional para que la imagen se ajuste, pero como puede ver, el div ignora por completo la imagen.

Estoy trabajando dentro de WordPress.

Código utilizado: 

<div style="border: 5px solid #FFC85D; padding: 10px; margin:30px;">

<p><strong>UPCOMING RELEASE: ISFN ANTHOLOGY #1</strong></p>

<p>

<a href="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-full.jpg" 
target="_blank">
<img src="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-189x300.jpg" 
alt="" 
title="Anthology 1 front" 
width="189" height="300" 
class="size-medium wp-image-801" /></a>

Click image for full cover spread.

<strong>Authors: </strong> blah blah blah.</p>

<p><strong>Cover Art By:</strong> Xenia Latii</p>

<p>blah blah blah</p>

</div>

Quiero que el borde div envuelva naturalmente todo el contenido, incluida la imagen. Sin el relleno adicional, la imagen se superpone al borde y todo se ve uglo.

Gracias.

EDITAR: solía <div style="overflow:auto; ..."> Y parece funcionar. ¿Es esta una solución adecuada o tendré problemas más adelante?

  • No estoy seguro de lo que quiere decir con ‘usado’. Por favor, aclare.

    – Sendero Winfield

    18 de abril de 2011 a las 0:10

  • Fue un error tipográfico. “Usé ‘

    ‘”

    – Yo no sé mejor

    18 de abril de 2011 a las 1:09

    Si entiendo correctamente, entonces creo que eso es lo que necesitas. Tratar de usar overflow:hidden eso debería ser la solución a su problema.

    avatar de usuario
    valery

    Probar overflow: hidden y configure el ancho del div para decir, por ejemplo, 300 px, luego configure el ancho de las imágenes al 100%.

    necesita establecer ancho y alto para su etiqueta img en div:

    p.ej

    img style=”ancho: 100%; alto: 100%;” alt=”abc…” src=”https://algunsitio/tu_imagen.png”

    avatar de usuario
    simon elder

    Ambas opciones de desbordamiento sugirieron simplemente cortar la parte de la imagen que está fuera del div, en lugar de cambiar el tamaño de la imagen para que quepa dentro, que es lo que realmente debe suceder. Encontré que usando las propiedades div float-none Parece funcionar.

¿Ha sido útil esta solución?