Question

我正在尝试在我的响应式网站中制作图像响应，因为我的主题也是响应式的。但我正在努力寻找符合我需求的解决方案。这是我的代码

#payment_wrapper img {
  width: 375px;
  max-width: 100%;
  height: auto;
}

<div id="payment_wrapper">
<img title="Payment" alt="Payment"  src="{{media url="payment.png}}"  />
<a target="_blank" href="https://www.mysite.co.uk/"> <img  title=" image2 " alt=" image2" src="{{media url="image2.png}}" /> </a>
<a target="_blank" href="http://www.mysite.co.uk"> <img title=" image3" alt=" image3 " src="{{media url="image3.png}}"  />
</div>

有人可以告诉我，我做错了什么吗？在任何人将其标记为重复帖子之前，请知道我已尝试过其他帖子以及这些帖子中提到的所有解决方案，但没有一个对我有效。

如果我设置width: 100%我的图片太大，如果我设置max-width: 375px;它就没有响应。你能告诉我编写上述代码的正确方法吗？

我们将非常感谢您对此事的帮助，

Answer 1

您需要更改.footer-bottom .item

中的宽度

.footer-bottom .item {
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
}

希望它会对你有所帮助。

Answer 2

您应该将max-width包裹在块中并在其上设置<div>。

请注意第一张图片周围的a { display: block; }标记和#payment_wrapper img { width: 100%; height: auto; } div, a { display: block; } #payment_wrapper > *:nth-child(1) { max-width: 600px; } #payment_wrapper > *:nth-child(2) { max-width: 500px; } #payment_wrapper > *:nth-child(3) { max-width: 400px; }。

<div id="payment_wrapper">
<div><img title="Payment" alt="Payment"  src="http://placehold.it/600x300"  /></div>
<a target="_blank" href="https://www.mysite.co.uk/"> <img  title=" image2 " alt=" image2" src="http://placehold.it/500x300" /> </a>
<a target="_blank" href="http://www.mysite.co.uk"> <img title=" image3" alt=" image3 " src="http://placehold.it/400x300"  /></a>
</div>

void DrawLineDelegate::paint(QPainter *poPainter, const QStyleOptionViewItem &oOption, const QModelIndex &oIndex) const
{
    QStyle *poStyle;
    bool bSelected;

    // Valid index ?
    if(!oIndex.isValid())
        // Not valid.
        return;

    QStyledItemDelegate::paint( poPainter, oOption, oIndex );

    if (oIndex.column() == COLUMN_COLOR_ID) {

        const QRect oRect( oOption.rect );
        QColor oLineColor (oIndex.data(Qt::UserRole).toString());

        QStyleOptionViewItemV4 oOptv4 = oOption;
        initStyleOption(&oOptv4, oIndex);

        const QWidget *poWidget = oOption.widget;

        // Style option
        poStyle =
                poWidget ? poWidget->style() : QApplication::style();

        // Set pen
        poPainter->setPen(QPen(oLineColor, 2, Qt::SolidLine, Qt::RoundCap));

        // Selection state
        bSelected =
                oOption.state&QStyle::State_Selected;

        // Item selected ?
        if (bSelected)
        {
            poPainter->setBrush(oOption.palette.highlightedText());
            // This call will take care to draw line while selecting
            poStyle->drawControl(QStyle::CE_ItemViewItem, &oOptv4, poPainter, poWidget);
        }

        // Draw line in the middle of the item
        poPainter->drawLine( oRect.left(),                          // Start X-coordinate
                             oRect.top() + oRect.height() / 2,      // Center Height (Y-coordinate)
                             oRect.left() + oRect.width(),          // Line width
                             oRect.top()  + oRect.height() / 2);    // Center Height (Y-coordinate)
    }


}

Answer 3

仅设置最大宽度：100％，以便它不会溢出较小设备上的外部容器。不要为图像设置宽度以使其响应。

#payment_wrapper img {
  max-width: 100%;
  height: auto;
}

Answer 4

尝试进行设置，以便通过将最大宽度设置为百分比来使所有图像保持相对缩小的大小。

#payment_wrapper img{/*2 smaller images (100px)*/
    max-width: 16%;
}
#payment_wrapper img.payment_wrapper{/*Larger image (375px)*/
    max-width: 65%;
}

您可以通过为容器添加最小宽度来防止它们缩小太小。

#payment_wrapper{
    min-width: 200px;
}

有关示例，请参阅此jsfiddle

自动图像调整大小编码html / css

4 个答案: