управление изображением в asp.net (<img> элемент) -> помощь в позиционировании изображения! - PullRequest
Новая
       16

управление изображением в asp.net (<img> элемент) -> помощь в позиционировании изображения!

0 голосов
/ 26 июня 2011

У меня есть компонент изображения в asp.net, как показано ниже: 

<div id="imgOperatorLogoContainer">
    <asp:Image ID="imgOperatorLogo" runat="server" ToolTip="bla bla"
                AlternateText="bla bla" ImageUrl="~/Images/c"
                Width="170px" Height="191px" />
</div>

как вы видите, я поместил ширину и высоту для этого изображения, но при этом face-images.jpg (3 * 170 = 510 * 191) растягивается в области элемента!
но я не хочу этого действия, потому что face-images.jpg содержит 3 изображения (170 * 191) внутри, и я хочу контролировать их расположение с помощью CSS и JQuery!
я знаю, что мы можем сделать эту работу с помощью элемента div -> но как насчет компонента изображения asp.net!
это изображение после рендеринга, как показано ниже (html): 

<img style="height: 191px; width: 170px;" alt="bla bla" src="Images/face-images.jpg" title="bla bla" id="imgOperatorLogo">

но почему приведенные ниже css не работают для этого изображения: 

#imgOperatorLogo
{
  background-position: 0px 0px;
}

или 

#imgOperatorLogo
{
  background-position: -170px 0px;
}

или 

#imgOperatorLogo
{
  background-position: -340px 0px;
}

мы можем исправить эту проблему с помощью альтернативного div -> но таким образом мы теряем альтернативный текст, и я думаю, что это важно для SEO
заранее спасибо

Ответы [ 3 ]

1 голос
/ 26 июня 2011

Попробуйте:

Первое изображение: 

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) 0 0;">
</div>

Второе изображение: 

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -170px 0;">
</div>

Третье изображение: 

<div id="imgOperatorLogoContainer" style="width: 170px; height: 191px;
    background: url(Images/logo.png) -340px 0;">
</div>
0 голосов
/ 26 июня 2011

взгляните на css-спрайты.

Хорошо, в первую очередь, какой «ниже» комментарий вы имеете в виду?во-вторых, если вы хотите, чтобы он отображался как тег, зачем пытаться добавить стиль для фонового изображения?И вы хотите добавить альтернативный текст?Вы можете сгенерировать теги изображений с помощью jquery со стилями, предложенными выше, с помощью alt-text attr, или просто добавить заголовок attr.или вы хотите, чтобы он прекратил растягиваться (поскольку вы, кажется, знаете размер), просто добавьте свою собственную ширину и высоту ... и как вы хотите отобразить это?три отдельных изображения?Вы не хотите использовать DIV и хотите отображать их в одном элементе управления ASP.Net Image размером одного из трех изображений?что ты хочешь?

0 голосов
/ 26 июня 2011

То же самое ... Элементы управления IMG отображают идентификатор, который можно использовать через jQuery с помощью селектора #, или вы можете использовать CssClass, который отображает класс, и использовать.селектор

...