JQuery Mobile, изображения имеют маленькую черную рамку вокруг них

Question

Я использую jquery mobile, и у меня есть изображение, которое я бы хотел разместить на экране справа налево, без пропусков. Однако, если я просто наложу изображение, ничего не делая, например <img src="image.png />", оно получится с маленькой черной рамкой вокруг него. Это остается несмотря на то, что я установил width=100% в CSS. Как я могу удалить эту границу?

Добавление некоторого кода:

<div data-role="content" style="background-color: #000000">
    <div id="slogandiv">
    <img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
 </div>

Answer 1

Я только что сделал это.Это потому, что data-role = "content" имеет автоматическое заполнение 15px.Я вошел в файл .css и удалил это.поиск пользовательского интерфейса.запомните в пользовательском интерфейсе listview, что он имеет -15, поэтому также измените его на 0.

Answer 2

Директива CSS width: 100% для вашего изображения просто означает, что браузер должен отображать изображение в его реальном размере (если он может), он не будет растягивать его до какого-то другого размера. Это может объяснить, почему у вас есть небольшая граница вокруг него, так как изображение не совсем масштабируется до полной ширины области просмотра. Вы можете попробовать изменить настройки полей и отступов тега img, но я подозреваю, что для вас лучше всего подойдет отображение изображения другим способом.

Вы пытались манипулировать CSS содержащего элемента? Скажем, у вас есть класс абзаца с именем .container. Вы могли бы сделать что-то вроде этого:

.container {
  background: url('image.png') no-repeat;
  background-size: contain;
  width: 480px;
  height: 240px
}

… это будет использовать ваше изображение, как и раньше, но на этот раз атрибут background-size в contain заставит его заполнить размеры родительского элемента (высоту и ширину которого мы определили выше).

background-size является новым в CSS3 и поэтому не поддерживается единообразно, но он есть в WebKit и некоторых других браузерах. Подробнее: Список отдельно: увеличьте размер фона, пожалуйста!