выравнивание изображения в ячейке

alazankin · July 6, 2010

добрый день.

подскажите, пожалуйста. есть таблица, с ячейками 200х200 пикселей. в каждой ячейке должна быть картинка, с высотой 200 и разной шириной.

ячейка при этом должна сохранять ширину 200.

короче надо чтоб в ячейке отображались только 200 пикселей из середины картинки. т.е. чтоб картинка выходила за края ячейки.

в общем выглядеть должно так: http://500px.com/Senecarus

Edited July 6, 2010 by alazankin

psywalker · July 6, 2010

Я думаю намёк понят.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	table { border-collapse: collapse; border: 1px solid #000; }
		table td { width: 200px; height: 200px; border: 1px solid green;}
</style>
</head>

<body style="padding:50px;">
	<table>
		<tr>
			<td><div style="width: 200px; height: 200px; position: relative; background: red;"><div style="border: 2px solid black; width: 300px; height: 200px;"></div></div></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

stars · July 6, 2010

как вариант

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			td {width:200px;height:200px;}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0">
			 <tr>
				<td style="background: url(img.gif) center top;"></td>
				<td style="background: url(img.gif) center top;"></td>
				<td style="background: url(img.gif) center top;"></td>
				<td style="background: url(img.gif) center top;"></td>
				<td style="background: url(img.gif) center top;"></td>
			 </tr>
		</table>
	</body>
</html>

Edited July 6, 2010 by stars

alazankin · July 6, 2010

stars, спасибо, про бэкграунд тоже думал, но картинка должна быть кликабельна.

можно конечно сверху наложить прозрачную кликабельную картинку 200 на 200, но это как-то нелепо

и еще, как размер бэкграунд-картинки уменьшить? все картинки 500пкс в высоту, а хотелось бы чтобы в 200 влезала большая часть. спасибо.

stars · July 6, 2010

и еще, как размер бэкграунд-картинки уменьшить? все картинки 500пкс в высоту, а хотелось бы чтобы в 200 влезала большая часть. спасибо.

Не как. Я обычно похожие задачи решаю по средствам php...

alazankin · July 6, 2010

я не против, если напишите на пхп, если вас не затруднит )

stars · July 6, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			td {width:200px;height:200px;}
			div {width:200px;height:200px;overflow:hidden;display:block;float:left;}
		</style>
	</head>
	<body>
	<?php
	$fsize = 200;
	$schet0 = 0;
	$schet1 = 0;
	$imagesize = getimagesize('1.jpg');
	$schet0 = $imagesize[0];
	$schet1 = $imagesize[1];
	$schet0 = $fsize; $schet1 = ($imagesize[1]/100)*($schet0/($imagesize[0]/100)); if ($schet1>$fsize) {$schet0 = ($fsize/100)*($fsize/($schet1/100)); $schet1 = $fsize;}
	$schet0 = round($schet0);
	$schet1 = round($schet1);
	?>
		<table border="1" cellspacing="0" cellpadding="0">
			 <tr>
				<td><div><img src="1.jpg" width='<?php echo $schet0;?>' height='<?php echo $schet1;?>' <?php if ($schet0 > 200) { $schet0=round(($schet0-200)/2); echo 'style="margin-left: -',$schet0,'px;"'; }?> alt=""></div></td>
				<td><div><img src="1.jpg" width='<?php echo $schet0;?>' height='<?php echo $schet1;?>' <?php if ($schet0 > 200) { $schet0=round(($schet0-200)/2); echo 'style="margin-left: -',$schet0,'px;"'; }?>  alt=""></div></td>
				<td><div><img src="1.jpg" width='<?php echo $schet0;?>' height='<?php echo $schet1;?>' <?php if ($schet0 > 200) { $schet0=round(($schet0-200)/2); echo 'style="margin-left: -',$schet0,'px;"'; }?>  alt=""></div></td>
				<td><div><img src="1.jpg" width='<?php echo $schet0;?>' height='<?php echo $schet1;?>' <?php if ($schet0 > 200) { $schet0=round(($schet0-200)/2); echo 'style="margin-left: -',$schet0,'px;"'; }?>  alt=""></div></td>
				<td><div><img src="1.jpg" width='<?php echo $schet0;?>' height='<?php echo $schet1;?>' <?php if ($schet0 > 200) { $schet0=round(($schet0-200)/2); echo 'style="margin-left: -',$schet0,'px;"'; }?>  alt=""></div></td>
			 </tr>
		</table>
	</body>
</html>

Соответственно картинки если разные то перебираются в цикле...

alazankin · July 6, 2010

спасибо!

хотелось каэш с обрезкой до квадратных картинок, но посмотрел в др местах, там че-то больно сложный код получается. остановлюсь на этом варианте )

Sign In

выравнивание изображения в ячейке

Question

alazankin

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

alazankin

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

alazankin

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

alazankin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information