CSS posicionamiento absoluto sobre un IMG, que cambia de tamaño -- ss campo con css-position camp Relacionados El problema

css absolute positioning over an img, that changes size


0
vote

problema

Español

Pensé que tenía todo trabajando. un <img> , A div.wrapper Alrededor (con position:relative , y un <i class="icon-edit"></i> con la posición absoluta justo debajo de la parte superior derecha Posición del <img> . Algo así:

  <div class="userLogo" >   <img ng-show="user.image_url"  ng-src="{{user.image_url}}" />  //data from angular, doesn't make a difference here   <div  class="userEdit"><i class="icon-edit hand"></i></div> </div>   

con CSS (menos estilo pero puedes entender):

  .userLogo {   width: 233px;   height: 233px;   img {     height:233px;   }   float: left;   //border: 1px solid @borders;   position:relative; }  .userEdit {   background: @bajeBack;   width: 25px;   height: 25px;   line-height: 25px;   color: @lightGreen;   position: absolute;   top: 13px;   right: 13px;   z-index: 50;   font-size: 19px;   padding: 3px 2px 2px 4px;   text-align: center;   opacity: 0.7;   .icon-edit{    } }   

y luego, jugando con la webap me pegó: ¡El tamaño de la imagen puede cambiar! Como no quiero usar un ancho / altura establecido (que distorsionaría la proporción de algunas imágenes), simplemente configuro la altura (para adaptarse al diseño) y dejar que el navegador cambie el tamaño del ancho en consecuencia.

mi problema; Una imagen estrecha rompería el diseño: el ícono edit7 se colgaría en el aire, y no en la imagen en absoluto, ya que está posicionado de acuerdo con el UserLogo.

Mi pregunta: ¿Cómo puedo hacer el mismo posicionamiento "absoluto" de acuerdo con la imagen? Ya que no puede ser el contenedor. Por favor, por favor. y no dude en sugerir cambios en el HTML si es necesario. ¡Seré más feliz de aprender algo nuevo!

¡Gracias!

Original en ingles

I thought I had it all working. an <img>, a div.wrapper around it (with position:relative, and an <i class="icon-edit"></i> with absolute position just beneath the right top position of the <img>. something like this:

<div class="userLogo" >   <img ng-show="user.image_url"  ng-src="{{user.image_url}}" />  //data from angular, doesn't make a difference here   <div  class="userEdit"><i class="icon-edit hand"></i></div> </div> 

with css (less style but you can understand):

.userLogo {   width: 233px;   height: 233px;   img {     height:233px;   }   float: left;   //border: 1px solid @borders;   position:relative; }  .userEdit {   background: @bajeBack;   width: 25px;   height: 25px;   line-height: 25px;   color: @lightGreen;   position: absolute;   top: 13px;   right: 13px;   z-index: 50;   font-size: 19px;   padding: 3px 2px 2px 4px;   text-align: center;   opacity: 0.7;   .icon-edit{    } } 

and then, playing with the webapp it hit me: The image size can change! since I don't want to use a set width/height (that would distort the proportion of some images) I just set the height (to fit the design) and let the browser resize the width accordingly.

My problem; A narrow image would break the design - the edit icon would be hang in air, and not on the image at all, since it's positioned according to the userLogo.

My question: how can I do the same "absolute" positioning according to the image ? since it can't be the container. please enlight me. and don't hesitate to suggest changes to the html if needed. I'll be more the happy to learn something new!

Thanks!

     

Lista de respuestas

0
 
vote

Si lo entiendo correctamente, necesita restringir su imagen a un espacio establecido. ¿Qué tal si utiliza t_vertices0 y t_vertices111 .

  t_vertices2  

Es bastante bien compatible con estos días: http://caniuse.com/#search=max-width

 

If i understand you correctly, you need to constrain your image to a set space. How about using max-height and max-width.

.userLogo img {    max-height: 233px;     max-width: 233px; } 

It's pretty well supported these days: http://caniuse.com/#search=max-width

 
 

Relacionados problema

4  Posición: Fijo en Facebook Canvas (Iframe)  ( Positionfixed in facebook canvas iframe ) 
Nos gustaría tener un elemento de ancla DOM con posición: fijada en nuestra aplicación de lienzo de Facebook con un tamaño de lona fluida. Debido a que la apl...

2  No se puede obtener el desplazamiento cuando la posición: Fijo: los elementos desaparecen forman la pantalla  ( Unable to get the scroll when positionfixed elements disappears form the scr ) 
Barra superior (fija): como se ve en Twitter y Facebook, intentó imitar lo mismo en un proyecto web en el que estoy trabajando, sin importar cuánto lo intente...

0  ¿Cómo me pongo alinear al centro de un div con una posición fija?  ( How do i set align to center for a div with position fixed ) 
+ está funcionando ahora Estoy tratando de tener una barra en la parte inferior de la página con un ancho de 1024px alineado en el centro. Ya probé el mar...

2  ¿Cómo puedo insertar texto dinámico en un div con una posición absoluta?  ( How can i insert dynamic text into a div with absolute position ) 
Eche un vistazo a http://www.barelyfitz.com/ Screencast / HTML-Capacitación / CSS / POSICIONAMIENTO / Punto 6. DICE: No es una solución viable para la ma...

2  posición relativa de div dentro div  ( Relative position of div inside div ) 
Estoy diseñando un logotipo en CSS3. He hecho una clase .logo con una altura y anchura particular. Resto del div INTERIOR .logo Clase cambiará su posi...

0  CSS, problema HTML. ¿Cómo haría que el cuerpo principal del documento sea de cierto camino hacia abajo desde la cima?  ( Css html issue how would i get the main body of the document to be a certain w ) 
Básicamente, tengo una barra de navegación y un título, que ambos tienen las propiedades, Posición: fijo; arriba: (valor i insertado); Mi problema es ...

1  Posicionamiento en navegadores cruzados  ( Positioning in cross browsers ) 
Soy nuevo en el mundo del front-end y se estaba preguntando cómo hacen los elementos de posicionamiento en un sitio web que se traducen en varios navegadores...

4  Posición DIV por debajo del div que se fija con altura variable  ( Position div below fixed div with variable height ) 
Aquí está el problema: Digamos que tengo algo como esto: function SearchOff() { document.getElementById("Search").disabled = true; document.getEl...

0  Posición: Absoluto y altura  ( Positionabsolute and height ) 
Tengo este ejemplo http://jsfiddle.net/hnfcu/ Utilizo jQuery para mostrar y ocultar el .child div . El .child está posicionado ABSOLUTO A .parent El ...

23  Margins negativos contra posicionamiento relativo  ( Negative margins vs relative positioning ) 
Me he encontrado con muchas técnicas de diseño que involucran márgenes negativos, como este clásico para Posicionamiento de la barra lateral. Parece que est...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos