Как отобразить исходный размер изображения в режиме управления изображениями

Jane wang спросил: 12 мая 2018 в 04:03 в: c#

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

CSS

.imgFile {
 width: 100%;
 max-width: 100%;
 height: 100px;
 max-height:100%;
 margin-left: 7px;
 margin-right: 0px;
 margin-top: 5px;
 margin-bottom: 1px;
 background-repeat: no-repeat;
 background-color: white;
 background-size: 100%, 100%;
}

Asp. нетто

   System.Web.UI.WebControls.Image image = new 
    System.Web.UI.WebControls.Image();
        image.ID = file.Name + file.Oid;
        image.Attributes.Add("class", "imgFile");
        image.Attributes.Add("class", "img-responsive");
        image.Style.Add("background-image", "'LogoHeaderHandler.axd?f=" 
    + file.Oid + "&" + DateTime.Now.ToFileTime() + "'");

c# css asp.net

Dan Wilson ответил: 12 мая 2018 в 04:08

Некоторые скриншоты ваших ожидаемых и фактических результатов могут помочь здесь.

Dan Wilson ответил: 12 мая 2018 в 04:21

Фактически, я только заметил, что вы показываете фоновое изображение внутри элемента управления Image. Есть ли причина, по которой вы не устанавливаете свойство ImageUrl?

user1011627 ответил: 12 мая 2018 в 04:33

Вы уверены, что ваш CSS применяется правильно? Настройка фонового изображения таким образом будет работать (я только что протестировал ее), но мне пришлось вручную установить высоту / ширину, чтобы она отображалась правильно. Проверьте DevTools и убедитесь, что применяются атрибуты класса imgFile.

user1011627 ответил: 12 мая 2018 в 04:37

Кроме того, это похоже на вызов атрибутов.Add дважды уничтожает первый класс, который применяется.

2 ответа

user1011627 ответил: 12 мая 2018 в 04:45

Похоже, у вас есть 2 проблемы.

1) Attributes.Add очищает ваш класс imgFile на основе вашего текущего кода. Если вам нужно обоим, вам нужно будет добавить их вместе в одну строку следующим образом:

 image.Attributes.Add("class", "imgFile img-responsive");
 //image.Attributes.Add("class", "img-responsive");

2) Ваш CSS имеет следующее: background-size: 100%, 100%; Это нужно удалить, чтобы сохранить "оригинальный" размер изображения, иначе он растянет изображение.

Остальная часть кода, который у вас есть, дает мне результат, который вы ищете (что ваш обработчик работает как ожидалось ... Я не смоделировал эту часть в своем тестировании).

user1011627 ответил: 12 мая 2018 в 05:48

Что не работает? Опять же, я не могу имитировать обработчик, возвращающий изображение, поэтому вам нужно будет устранить эту проблему. Мое предложение состояло бы в том, чтобы устранить эту часть уравнения, пока вы не будете работать так, как хотите. Затем вы можете добавить назад и посмотреть, не сломается ли он. Включите изображение в свое веб-приложение и обратитесь к нему напрямую, а не указывая на обработчик и посмотрите, работает ли это.

Jane wang ответил: 13 мая 2018 в 01:34

В итоге оказалось, что если изображение используется в качестве фона, тогда высота изображения не может быть установлена на авто. Я изменил его, чтобы вместо этого использовать imageURL.

Jane wang ответил: 12 мая 2018 в 05:33

Добавлены два стиля вместе и удалены размер фона, и он по-прежнему не работает.