Question

我需要设置我的父div，它的子图像将在其中，因为父div具有可见边框，必须环绕图像和文本。感谢您的任何提示：）

HTML：

<section class="about-us">
  <div class="us-image">
    <img src="img/about-us.png" alt="about-us">
  </div>
  <div class="about-us-text">
    <h3>Abc</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit
      sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blandit lacus.
    </p>
  </div>
</section>
<!-- /about-us-->

from PyQt4 import QtCore, QtGui
import time

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s

try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)
class StartQT4(QtGui.QMainWindow):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

class Ui_MainWindow(object):

    def setupUi(self, MainWindow):
        MainWindow.setObjectName(_fromUtf8("MainWindow"))
        MainWindow.resize(767, 600)
        self.centralwidget = QtGui.QWidget(MainWindow)
        self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
        self.pushButton = QtGui.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(230, 300, 75, 23))
        self.pushButton.setObjectName(_fromUtf8("pushButton"))
        self.lineEdit = QtGui.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(80, 330, 371, 71))
        self.lineEdit.setObjectName(_fromUtf8("lineEdit"))

        self.label = QtGui.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(80, 400, 371, 71))
        font = QtGui.QFont()
        font.setPointSize(16)
        self.label.setFont(font)
        self.label.setStyleSheet(_fromUtf8("color:rgb(255, 85, 127)"))
        self.label.setObjectName(_fromUtf8("label"))


        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtGui.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 767, 21))
        self.menubar.setObjectName(_fromUtf8("menubar"))
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtGui.QStatusBar(MainWindow)
        self.statusbar.setObjectName(_fromUtf8("statusbar"))
        self.scrollArea = QtGui.QScrollArea(self.centralwidget)
        self.scrollArea.setGeometry(QtCore.QRect(130, 70, 301, 191))
        self.scrollArea.setWidgetResizable(True)
        self.scrollArea.setObjectName(_fromUtf8("scrollArea"))
        self.scrollAreaWidgetContents = QtGui.QWidget()
        self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 299, 189))
        self.scrollAreaWidgetContents.setObjectName(_fromUtf8("scrollAreaWidgetContents"))
        self.scrollArea.setWidget(self.scrollAreaWidgetContents)
        p= QtGui.QPalette()
        p.setColor(QtGui.QPalette.Background, QtCore.Qt.white)
        self.scrollArea.setAutoFillBackground(True)
        self.scrollArea.setPalette(p)
        self.retranslateUi(MainWindow)

    def retranslateUi(self, MainWindow):
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow", None))
        self.pushButton.setText(_translate("MainWindow", "send", None))

Answer 1

设置div的高度和宽度，并将max-width，max height size设置为100％。它将根据div的高度和宽度自动调整。

.us-image{
    height: 75px;
        width: 75px;
    }
    img {
        max-width: 100%;
        max-height: 100%;
    }

Answer 2

从.about-us div移除高度并使用clear:both .about-us::after清除浮动广告

HTML：

<section class="about-us">
        <div class="us-image">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/af/99/5d/af995d61b255bfd53bbdbfa343451949.jpg" alt="about-us">
        </div>
        <div class="about-us-text">
            <h3>Abc</h3>
            <p>Lorem ipsum dolor sit ame, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blanditd lacus. 
            </p>
        </div>
    </section><!-- /about-us-->

的CSS：

 .about-us {
border: 1.5px solid black; 
width: 100%;
 //I need to get rid of this as now it's fixed

.us-image {
    float: left;
    width: 30%;
        img {
            width: 100%;
            height: auto;
            padding: .7%;
         }
 }

.about-us-text {
    float: left;
    width: 64%;
    margin: 0 3%;

    h3 {
        margin-top: 5%!important;
        text-transform: uppercase;
        font-size: 130%;
        font-weight: 500;
    }

}
}

.about-us::after{
  content: "";
  display:table;
  clear:both;
}

Answer 3

刚刚将display: inline-flex;添加到您的about-us课程中，无需更改您的scss中的任何其他内容。我刚把你的scss编译成了css。

＆＃13;

.about-us {
  display: inline-flex;
  border: 1.5px solid #000000; 
  width: 100%;
  height: 265px;
}
.about-us .us-image {
  float: left;
  width: 30%;
  display: inherit;
}
.about-us .us-image img {
  width: 100%;
  height: auto;
  padding: .7%;
}

.about-us-text {
  float: left;
  width: 64%;
  margin: 0 3%;
}
.about-us-text h3 {
  margin-top: 5%!important;
  text-transform: uppercase;
  font-size: 130%;
  font-weight: 500;
}

＆＃13;

<section class="about-us">
  <div class="us-image">
    <img src="http://freebigpictures.com/wp-content/uploads/2009/09/forest-land.jpg" alt="about-us">
  </div>
  <div class="about-us-text">
    <h3>Abc</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blandit lacus. 
    </p>
  </div>
</section><!-- /about-us-->

＆＃13;

Answer 4

将图片浮动到左侧，并将Public NotInheritable Class ZipFile Public Shared Sub ExtractToDirectory( sourceArchiveFileName As String, destinationDirectoryName As String ) End Sub End Class属性添加到您的父DIV，同时删除DIV的固定高度。

Answer 5

.us-image img{
width:100%;}

将此添加到css

父div复制子图像的尺寸

5 个答案: