Responsive Image изменить размер вопроса

Question

Responsive Image изменить размер вопроса

0

не знаю, почему изображение заголовка не изменяется правильно. См. Http://www.insidemarketblog.com

Я думал, что правильно настроил его, но изображение заголовка не изменится на размер для мобильного устройства. Какие-либо предложения?

CSS:

#thesis_header_image {
    height: auto;
    max-width: 100%;
}
.container_header_image {
    width: 400px;
}

HTML:

<div id="wrap">
<div class="container_header_image">
<div class="text_box">
<a href="http://www.insidemarketblog.com">
<img id="thesis_header_image" width="400" height="87" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home">
</a>
</div>
</div>

user3117275 19 апр. 2014, в 08:17

Источник

Теги:

html

css

responsive-design

5 ответов

1

Удалите ширину и высоту из HTML. ~~HTML имеет приоритет над всем, что вы определяете в своем CSS.~~

Редактировать:

Это жидкое решение.

HTML

<div id="wrap">
    <div class="container-header-image">
        <a href="http://www.insidemarketblog.com">
        <img id="header-image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home">
        </a>
    </div>
</div>

CSS

#wrap{
    width: 100%;
    background: orange;
}

.container-header-image{
    max-width: 400px;
}

#header-image {
    width: 100%;
}

http://jsfiddle.net/dustindowell/W78b3/

user2477011 19 апр. 2014, в 05:02

1

Попробовал это. Не работает Кроме того, изображение «SEO» в статье также имеет ширину и высоту. И ваше утверждение не соответствует действительности. Атрибуты встроенного стиля имеют приоритет над стилями, которые вы определяете в CSS. В этом случае указываются атрибуты width и height, что довольно часто встречается для элементов img .
GolezTrol 19 апр. 2014, в 06:04
0

Вы правы. Я обновил свой ответ.
user2477011 19 апр. 2014, в 06:21

1

Измените свой css для этого

media="screen, projection"
@media screen and (max-width: 400px)
#wrap, .container_header_image {
width: auto;
}

krish 19 апр. 2014, в 04:26

1

Вы должны изменить ширину контейнера. Вам даже не нужен media запрос.

#thesis_header_image {
    height: auto;
    max-width: 100%;
}
.container_header_image {
    width: 100%;
}

Пожалуйста, проверьте fiddle

Parixit 19 апр. 2014, в 04:19

0

единственная проблема этого решения заключается в том, что оно растягивает изображение до 100% от 860 пикселей, и я хочу, чтобы изображение изначально имело ширину 400 пикселей. Я реализовал это изменение, и вы можете увидеть результат.
user3117275 19 апр. 2014, в 06:17
0

@ user3117275 обновил ответ. Проверь сейчас. Я сделал это изображение масштабировать до полного размера. но отменил это.
Parixit 19 апр. 2014, в 06:21
0

Спасибо за обновление.
user3117275 19 апр. 2014, в 06:36

Показать ещё 1 комментарий

0

добавить эти стили

media="screen, projection"
@media (max-width: 450px)
.header {
   padding-right: 0;
   padding-left: 0; 

#wrap {
   width: 100%;
}

.container_header_image {
   width: 100%;
}

#thesis_header_image {
width: 100% !important;
max-width: 400px;
height: auto;
}

}

4dgaurav 19 апр. 2014, в 04:57

Ещё вопросы

Попробовал это. Не работает Кроме того, изображение «SEO» в статье также имеет ширину и высоту. И ваше утверждение не соответствует действительности. Атрибуты встроенного стиля имеют приоритет над стилями, которые вы определяете в CSS. В этом случае указываются атрибуты width и height, что довольно часто встречается для элементов img .
единственная проблема этого решения заключается в том, что оно растягивает изображение до 100% от 860 пикселей, и я хочу, чтобы изображение изначально имело ширину 400 пикселей. Я реализовал это изменение, и вы можете увидеть результат.
@ user3117275 обновил ответ. Проверь сейчас. Я сделал это изображение масштабировать до полного размера. но отменил это.

Imran Bughio · Accepted Answer · 2014-04-19T04-46-00.000Z

Добавьте этот код внизу css.css

@media screen and (max-width:400px) {
    #wrap{
        width: auto;
    }
}

Это установит wrap на auto на мобильном телефоне, который в остальном останется 860px.

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