Tengo una imagen de 400px y una div que es más pequeña (el ancho no es siempre 300px como en mi ejemplo). Quiero centrar la imagen en el div, y si hay un desbordamiento, ocultarlo.centro imagen en div con desbordamiento oculto
Nota: Debo mantener la posición: absoluta en la apuesta. Estoy trabajando con css-transitions, y si uso position: relative, mi imagen tiembla un poco (http://bit.ly/MaYbMB).
jsFiddle http://jsfiddle.net/wjw83/1/
Debe hacer que el contenedor sea relativo y también darle una altura y listo.
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />Si desea también puede centrar la imagen verticalmente mediante la adición de un margen negativo y la posición superior: http://jsfiddle.net/jaap/wjw83/5/
que la tienen a corp su imagen desde los lados de ocultarlo prueba este
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
una de la demo de la primera forma en el sitio por encima de
Voy a leer un poco sobre él también
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
solo asegúrate de usar la imagen a través del fondo css. Usa la posición de la imagen de fondo como fondo: url (tu ruta de la imagen) centro del centro sin repetición; automáticamente se alineará al centro de la pantalla.
esto parece funcionar en nuestro sitio, usando sus ideas y un poco de matemática basado en el borde izquierdo de la envoltura div. Parece redundante ir a la izquierda al 50% y luego sacar un 50% de margen adicional, pero parece funcionar.
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
que han estado tratando de poner en práctica la respuesta de Jaap dentro this page de mi sitio web reciente, con una diferencia: el .main {height:} se establece en Auto en lugar de un valor fijo px. Como desarrollador receptivo, estoy buscando una solución para sincronizar la altura de la imagen con el elemento de texto flotante izquierdo, pero solo en caso de que la altura del texto sea mayor que la altura real de mi imagen. En ese caso, la imagen no se debe volver a escalar, sino que debe recortarse y centrarse como se describe en la pregunta original aquí arriba. ¿Se puede hacer esto? Puede simular el comportamiento bajando lentamente el ancho del navegador.
Este problema es un gran dolor en el ... pero finalmente lo conseguí. He visto muchas soluciones complicadas. Esto es tan simple ahora que lo veo.
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
Ninguna de las soluciones anteriores funcionó bien para mí.Necesitaba un tamaño de imagen dinámica para caber en un contenedor primario circular con overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
Ejemplo de trabajo aquí: http://codepen.io/simgooder/pen/yNmXer
Gracias por su respuesta, he estado buscando una forma de hacer esto por algunas noches y ¡lo han resuelto! –
¡Ningún problema! Tomó mucho tiempo, pero tiene tantas aplicaciones, es casi indispensable. –
¡Gracias! He vuelto a este problema con el tiempo porque nunca he estado 100% satisfecho con otras soluciones ... 'transformar: traducir' simplemente siendo demasiado quisquilloso. Intenté varias veces usar 'margin: 0 auto' que no funcionó. La magia real ocurre con 'margin: 0 -100%' en lugar del valor 'auto' :) – aequalsb
encontrado este bonito sollution por Melissa PENTA
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
centro de cualquier imagen a tamaño en div
Se utiliza con envoltura redondeada y diferentes imágenes de tamaño.
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
Ejemplo de trabajo aquí codepen
Es muy difícil entender lo que es exactamente el problema y qué es lo que intenta lograr. ¿Es [eso] (http://jsfiddle.net/teneff/wjw83/3/)? – Teneff
en http://bit.ly/MaYbMB, la pestaña 'coaching' tiembla un poco si la colocas. Quiero resolver eso usando la posición: absoluto. El problema es que overflow: hidden no afecta a un elemento secundario con position: absolute. – Puyol