Imagenes

facurouss · #1 (**permalink**) 20/08/2010, 11:38

Buenas como va?
Miren tengo que hacer una portada de una pagina con dos imagenes una imagen tiene que ocupar una parte y la otra imagen la otra, no importa el tamaño digamos se tienen que acomodar solas en cualquier resolucion del monitor.
No se me ocurre como hacerlo si me pudieran dar una manito se los agradeceria.
:)

kseso? · #2 (**permalink**) 20/08/2010, 12:56

Aquí se mencionó una forma de las mil posibles.
Pero es demasiada imprecisa y genérica su consulta como para sugerir alguna forma mínimamente ajustada a sus necesidades.

Atentamente

Editado:
Mis disculpas, por alguna razón no publiqué el enlace que debería estar en la palabra "aquí". El ejemplo que pretendía mostrarle era un tema de hace escasos días donde hablamos de colocar una imagen al body y otra al html (como fondos vía css)

jomaruro · #3 (**permalink**) 21/08/2010, 01:34

Hola:

Cita:

Iniciado por facurouss

No se me ocurre como hacerlo si me pudieran dar una manito se los agradeceria.
:)

Saludos.

deirdre · #4 (**permalink**) 21/08/2010, 17:58

Hola facurouss

Está claro, como dicen mis dos compañeros (kseso? y jomaruro), que plantear preguntas tan ambiguas es poco menos que renunciar de antemano a cualquier ayuda.

Sólo con el ánimo de darte algo para que pienses (y trabajes) y logres realizar tu propuesta, te dejo este código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>Sin título 1</title>
<style type="text/css">
* {
	margin: 0; 
	padding: 0;
	position: relative;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#foto1 {
	width: 50%;
	height: 100%;
	float: left;
	overflow: hidden;
}
#foto2 {
	width: 50%;
	height: 100%;
	float: right;
	overflow: hidden;
}
.foto {
	width: 100%;
	height: 100%;
}
.comentario {
	position: absolute;
	top: 0; left: 0;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	padding: 10px;
}
.coloc {
	margin-top: 15px;
	display: block
}
</style>
</head>

<body>
<div id="foto1"><img class="foto" alt="" src="foto1.jpg" /></div>
<div id="foto2"><img class="foto" alt="" src="foto2.jpg" /></div>

<div class="comentario">Esta composición siempre se verá con dos imágenes (de cualquier tamaño*) y cada imagen ocupará la mitad exacta del ancho de la pantalla y todo el alto de la pantalla  en cualquier resolución de monitor.<br />
<span class="coloc">* Las imágenes deben ser de la suficiente calidad y tamaño para que no pierdan en los monitores de gran resolución. Hay que considerar la deformación más o menos grave de las imágenes, dependiendo de la resolución y proporción del monitor. Deirdre para Foros del Web (www.forosdelweb.com)</span>
</div>
</body>

</html>

También lo he dejado en este enlace con dos imágenes de cierta calidad y puedes ver el resultado.

Saludos

facurouss · #5 (**permalink**) 23/08/2010, 11:25

deirdre justo eso era lo que buscaba muchas gracias